/* ============================================================
   EPI360 — Fundação visual "Documento Primeiro", agora na marca
   O papel e as réguas continuam mandando no documento; a cor,
   o raio e a sombra vêm da identidade EPI360 (azul-marinho e
   teal amostrados da própria arte da marca em assets/).
   Fonte da verdade: design/documento/prototipo.html
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- identidade EPI360 (amostrada da arte da marca) ---------- */
  --marca-navy: #0a2352;
  --marca-azul: #123a6e;
  --marca-teal: #00808f;
  --marca-teal-claro: #17a2b8;
  --marca-acao: #1348a8;
  --seguranca: #f2c94c;

  /* ---------- papel e tinta ---------- */
  --papel: #ffffff;
  --papel-2: #f6f8fb;
  --papel-3: #edf2f8;
  --papel-fundo: #e9eef5;
  --tinta: #101d2c;
  --tinta-2: #3d4b5d;
  --tinta-3: #5b6a7c; /* 4,7:1 sobre a mesa (era #6a7889, 3,9:1) */
  --regua: #e4eaf1;
  --regua-2: #cbd6e2;
  --regua-3: #97a5b6;

  /* ---------- tintas de carimbo (estado, prazo e risco) ---------- */
  --oficial: #123a6e;
  --oficial-bg: #e9f0fb;
  --selo: #0d7a5f;
  --selo-bg: #e3f5ef;
  --oliva: #506b16;
  --oliva-bg: #f1f6e3;
  --ambar: #9a6408;
  --ambar-bg: #fdf2dc;
  --laranja: #9c4507;
  --laranja-bg: #fdebdc;
  --carimbo: #b3261e;
  --carimbo-bg: #fdecea;

  /* ---------- tipografia ---------- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  /* escala modular — piso inegociável de 12px */
  --fs-rubrica: 12px;
  --fs-sm: 13px;
  --fs-body: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-h3: 20px;
  --fs-h2: 21px;
  --fs-h1: 24px;
  --fs-num: 30px;
  --fs-carimbo: 38px;

  /* ---------- espaçamento (grade de 4px) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  /* ---------- réguas, raio e larguras ----------
     O raio deixa de ser de 2px: canto vivo lê como formulário técnico.
     A FOLHA continua quase reta (--r-folha), porque documento é documento. */
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 12px; /* três raios: 4 (folha), 8 (controle), 12 (painel) */
  --r-pill: 999px;
  --r-folha: 4px;
  --regua-fina: 1px solid var(--regua);
  --regua-media: 1px solid var(--regua-2);
  --regua-forte: 1.5px solid var(--tinta);
  --regua-dupla: 3px double var(--regua-2);
  --indice: 264px;
  --conteudo-max: 1440px;
  --ctrl-h: 36px;
  --toque: 44px;
  /* altura do cabeçalho grudado no topo: alvo de rolagem precisa reservar. */
  --topbar-h: 64px;

  /* ---------- sombras discretas (folha sobre a mesa) ---------- */
  --sombra-folha: 0 1px 2px rgba(16, 29, 44, 0.05), 0 8px 24px rgba(16, 29, 44, 0.06);
  --sombra-baixa: 0 1px 2px rgba(16, 29, 44, 0.06);
  --sombra-alta: 0 4px 10px rgba(16, 29, 44, 0.07), 0 20px 48px rgba(16, 29, 44, 0.12);
  --sombra-marca: 0 6px 18px rgba(18, 58, 110, 0.22);
  --anel-foco: 0 0 0 3px rgba(19, 72, 168, 0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mola: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ============================================================
     Etapa 1-B — camada semântica do design system.
     Aliases sobre os tokens de documento acima: um nome por papel
     (espaço, tipo, raio, sombra, cor, camada, duração). Nenhum token
     antigo muda de nome; a interface passa a usar estes.
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --font-display: 34px;
  --font-h1: var(--fs-h1);
  --font-h2: var(--fs-h2);
  --font-h3: var(--fs-lg);
  --font-body: var(--fs-body);
  --font-small: var(--fs-sm);
  --font-caption: var(--fs-rubrica);
  --font-label: var(--fs-rubrica);
  --font-metric: var(--fs-num);
  --font-metric-lg: var(--fs-carimbo);

  --radius-sm: var(--r-folha);
  --radius-md: var(--r-sm);
  --radius-lg: var(--r);
  --radius-pill: var(--r-pill);

  --shadow-sm: var(--sombra-baixa);
  --shadow-md: var(--sombra-folha);
  --shadow-lg: var(--sombra-alta);
  --shadow-focus: var(--anel-foco);

  --color-primary: var(--oficial);
  --color-primary-strong: var(--marca-navy);
  --color-primary-soft: var(--oficial-bg);
  --color-bg: var(--papel-fundo);
  --color-surface: var(--papel);
  --color-surface-2: var(--papel-2);
  --color-surface-3: var(--papel-3);
  --color-text: var(--tinta);
  --color-text-2: var(--tinta-2);
  --color-text-3: var(--tinta-3);
  --color-border: var(--regua);
  --color-border-2: var(--regua-2);
  /* contorno de campo: 3,3:1 sobre o papel (SC 1.4.11); --regua-3 dá só 2,5:1 */
  --color-border-input: #7f90a4;
  --color-ok: var(--selo);
  --color-ok-bg: var(--selo-bg);
  --color-info: var(--oficial);
  --color-info-bg: var(--oficial-bg);
  --color-warn: var(--ambar);
  --color-warn-bg: var(--ambar-bg);
  --color-high: var(--laranja);
  --color-high-bg: var(--laranja-bg);
  --color-danger: var(--carimbo);
  --color-danger-bg: var(--carimbo-bg);

  --z-sticky: 10;
  --z-drawer: 40;
  --z-modal: 60;
  --z-toast: 70;

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  --header-h: 64px;
  --indice-compacto: 64px;

  /* ============================================================
     Compatibilidade: os nomes antigos continuam existindo,
     apontando para a paleta de documento. Nenhuma classe muda de nome.
     ============================================================ */
  --bg: var(--papel-fundo);
  --surface: var(--papel);
  --surface-soft: var(--papel-2);
  --line: var(--regua);
  --line-strong: var(--regua-2);
  --text: var(--tinta);
  --muted: var(--tinta-3);
  --muted-strong: var(--tinta-2);
  --primary: var(--oficial);
  --primary-strong: var(--marca-navy);
  --primary-soft: var(--oficial-bg);
  --blue: var(--oficial);
  --blue-soft: var(--oficial-bg);
  --amber: var(--ambar);
  --amber-soft: var(--ambar-bg);
  --red: var(--carimbo);
  --red-soft: var(--carimbo-bg);
  --green: var(--selo);
  --green-soft: var(--selo-bg);
  --violet: var(--oliva);
  --violet-soft: var(--oliva-bg);
  --shadow: var(--sombra-folha);
  --shadow-soft: var(--sombra-baixa);
  --shadow-lift: var(--sombra-alta);
  --radius: var(--r);
  --sidebar: var(--indice);
  --font: var(--sans);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--papel-fundo);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background-color: var(--papel-fundo);
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--papel);
  background: var(--tinta);
}

/* ---------- títulos: serifada de documento ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--tinta);
}

/* ---------- dados legais: monoespaçada ---------- */
code,
kbd,
samp,
pre,
.mono {
  font-family: var(--mono);
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

.num {
  font-variant-numeric: tabular-nums;
}

.serif {
  font-family: var(--serif);
}

/* ---------- rubrica: rótulo em versalete de formulário ---------- */
.rubrica {
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---------- réguas ---------- */
hr {
  border: 0;
  border-top: 1px solid var(--regua);
  margin: var(--s4) 0;
}

a {
  color: var(--oficial);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--tinta);
}

@keyframes fade-up {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.98);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes meter-sweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes icon-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes sheen {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(130%);
  }
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Foco visível: filete azul de documento com halo de papel,
   para sobreviver tanto sobre papel quanto sobre tinta. */
*:focus-visible {
  outline: 2.5px solid var(--oficial);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--papel);
}

/* Texto só para leitor de tela: a palavra do estado onde o desenho usa glifo. */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.login-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
  background-color: var(--papel-3);
  overflow: hidden;
  isolation: isolate;
}

.login-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  min-width: 100vw;
  min-height: 100dvh;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.08) contrast(1.02) saturate(1.06);
  transform-origin: center center;
  transform: translateZ(0) scale(0.96);
  z-index: 0;
  pointer-events: none;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(251, 250, 246, 0.08), rgba(251, 250, 246, 0.02));
}

.login-content {
  position: relative;
  z-index: 1;
}

.login-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  justify-items: start;
  gap: clamp(26px, 6vw, 82px);
  align-items: center;
  width: min(1280px, 100%);
  min-height: calc(100vh - clamp(36px, 8vw, 88px));
  margin: 0 auto;
  padding-right: clamp(0px, 4vw, 48px);
}

.login-content-right {
  grid-template-columns: 1fr;
  justify-items: end;
  width: 100%;
  padding-right: clamp(16px, 4vw, 64px);
  column-gap: 0;
}

.login-content-right .login-panel.single {
  grid-column: 1;
  justify-self: end;
  margin-left: auto;
}

.login-content-right .login-home-panel {
  background: rgba(251, 250, 246, 0.2);
  border-color: rgba(251, 250, 246, 0.42);
  backdrop-filter: blur(14px);
}

.login-brand {
  min-height: 1px;
  color: var(--text);
  visibility: visible;
  margin-right: 8px;
  align-self: center;
}

.login-brand .brand-mark {
  margin-bottom: 22px;
}

.login-brand h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: 0;
}

.login-brand p {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1.55;
}

.login-feature-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.login-feature-list span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 36px;
  padding: 7px 11px;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 700;
  background: rgba(251, 250, 246, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.login-feature-list svg {
  width: 18px;
  height: 18px;
  color: var(--oficial-bg);
}

.login-panel {
  background: rgba(251, 250, 246, 0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  animation: scale-in var(--dur-3) var(--ease) both;
  overflow: hidden;
}

.login-panel.single {
  width: min(520px, 100%);
  justify-self: center;
}

.login-home-panel {
  background: rgba(251, 250, 246, 0.72);
  border-color: rgba(251, 250, 246, 0.65);
}

.login-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.login-stack > .login-panel:first-child {
  grid-column: 1;
  grid-row: 1;
}

.login-stack > .login-panel:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.login-stack > .login-panel:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.login-stack > .login-panel:nth-child(3) .form-grid {
  grid-template-columns: 1fr;
}

.login-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 0 14px;
  border-bottom: 0;
  text-align: center;
}

.login-panel-header h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-h1);
}

.login-panel-header p {
  margin: 0;
  color: var(--muted);
}

.login-panel-body {
  display: grid;
  gap: 16px;
  padding: 16px 24px;
}

.login-choice-grid {
  display: grid;
  gap: 10px;
  padding: 0;
}

.login-choice {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  min-height: 82px;
  padding: 14px;
  color: var(--text);
  text-align: left;
  background: rgba(251, 250, 246, 0.2);
  border: 1px solid var(--regua-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.login-choice:hover {
  transform: translateY(-3px);
  border-color: var(--oficial);
  background: rgba(251, 250, 246, 0.38);
  box-shadow: var(--anel-foco);
}

.login-choice::after,
.primary-button::after,
.secondary-button::after {
  position: absolute;
  inset: 0;
  content: "";
  background: none;
  transform: translateX(-130%);
  pointer-events: none;
}

.login-choice:hover::after,
.primary-button:hover::after,
.secondary-button:hover::after {
  animation: none;
}

.login-choice-icon {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--primary);
  background: rgba(251, 250, 246, 0.28);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--regua-2);
}

.login-choice-icon svg {
  width: 22px;
  height: 22px;
}

.login-choice strong,
.login-choice span:not(.login-choice-icon) {
  display: block;
}

.login-choice span:not(.login-choice-icon) {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.trial-box {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--primary-soft);
  border: 1px solid var(--oficial-bg);
  border-radius: var(--radius);
}

.trial-box svg {
  width: 22px;
  height: 22px;
}

.trial-box-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--primary);
  background: var(--papel);
  border-radius: var(--r);
}

.trial-box strong,
.trial-box span {
  display: block;
}

.trial-box span {
  margin-top: 2px;
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}

.brand {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 0;
  margin: 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--regua);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0;
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2.5px var(--papel-2),
    inset 0 0 0 3.5px var(--tinta);
}

.brand strong,
.brand span {
  display: block;
  white-space: nowrap;
}

.brand strong {
  overflow: hidden;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-lg);
  text-overflow: ellipsis;
}

.brand span {
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 1px;
  padding: 0 12px;
}

.nav-item,
.ghost-button,
.icon-button,
.primary-button,
.secondary-button,
.danger-button,
.table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

/* O índice é uma lista de links de verdade — dá para abrir em outra aba,
   copiar o endereço, favoritar. Como <a> não herda o reset de <button>, o
   sublinhado e a cor de link precisam ser desligados aqui. */
.nav-item {
  position: relative;
  display: flex;
  text-decoration: none;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: var(--toque);
  padding: 9px 8px;
  color: var(--tinta-2);
  background: transparent;
  border-color: transparent;
}

.nav-item.active svg,
.login-choice:hover svg,
.cadastro-step:hover svg {
  animation: icon-breathe var(--dur-3) var(--ease);
}

.nav-item svg,
.ghost-button svg,
.icon-button svg,
.primary-button svg,
.secondary-button svg,
.danger-button svg,
.table-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ghost-button {
  width: 100%;
  min-height: var(--toque);
  padding: 9px 12px;
  color: var(--tinta-2);
  font-weight: 600;
  background: var(--papel);
  border-color: var(--regua-2);
}

.ghost-button:hover {
  transform: none;
  color: var(--tinta);
  background: var(--papel-3);
  border-color: var(--tinta);
}

.file-action {
  position: relative;
  cursor: pointer;
}

.file-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.view {
  display: grid;
  gap: 20px;
}

/* Só na troca de tela: render() refaz o #app a cada salvar. */
.vista-nova .view > * {
  animation: fade-up var(--dur-3) var(--ease) both;
}

.vista-nova .view > *:nth-child(2) {
  animation-delay: 45ms;
}

.vista-nova .view > *:nth-child(3) {
  animation-delay: 90ms;
}

.vista-nova .view > *:nth-child(4) {
  animation-delay: 135ms;
}

.view-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: start;
}

.panel {
  position: relative;
  min-width: 0;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.panel:hover {
  border-color: var(--regua-2);
  box-shadow: var(--shadow-lift);
}

.panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--primary), var(--blue), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.panel:hover::before {
  opacity: 1;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-header h2,
.panel-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
}

.panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.panel-body {
  padding: 18px;
}

.guided-view {
  gap: 16px;
}

.onboarding-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  gap: 16px;
  align-items: start;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--papel), var(--papel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.onboarding-hero::after,
.saas-command::after {
  position: absolute;
  inset: 0;
  content: "";
  background: none;
  transform: translateX(-130%);
  pointer-events: none;
}

.onboarding-hero:hover::after,
.saas-command:hover::after {
  animation: none;
}

.onboarding-copy h2 {
  margin: 3px 0 7px;
  font-size: clamp(24px, 3vw, 34px);
}

.onboarding-copy p,
.onboarding-copy .eyebrow,
.onboarding-progress span {
  color: var(--muted);
}

.onboarding-progress {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 92px;
  padding: 14px;
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.onboarding-progress strong {
  font-size: var(--fs-num);
}

.cadastro-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
}

.guided-flow {
  grid-column: 1 / -1;
}

.cadastro-step {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
  color: var(--text);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.cadastro-step:not(.locked):hover,
.cadastro-step.active {
  border-color: var(--oficial-bg);
  box-shadow: var(--anel-foco);
  transform: translateY(-1px);
}

.cadastro-step > span:not(.badge) {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--papel);
  font-weight: 800;
  background: var(--primary);
  border-radius: var(--r);
}

.cadastro-step.locked > span:not(.badge) {
  background: var(--muted);
}

.cadastro-step svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.cadastro-step.locked {
  cursor: not-allowed;
  opacity: 0.72;
}

.cadastro-step strong {
  font-size: var(--fs-md);
}

.cadastro-step small {
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

/* A folha em aberto em cima e o "Lançado" embaixo, cada um na largura toda.
   Lado a lado, a conferência ficava com metade da tela e a tabela dela
   (ambiente, filial, empresa, grau, situação, ações) só aparecia arrastando. */
.guided-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.guided-main .panel-body {
  display: grid;
  gap: 16px;
}

.guided-hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  color: var(--muted-strong);
  background: var(--papel-2);
  border: 1px solid var(--oficial-bg);
  border-radius: var(--radius);
}

.guided-hint svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.guided-hint strong,
.guided-hint p {
  margin: 0;
}

.guided-hint p {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.guided-form {
  display: grid;
  gap: 4px;
}

.simple-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guided-actions {
  justify-content: space-between;
}

.guided-side .table-wrap table {
  min-width: 680px;
}

.compact-toolbar {
  margin-bottom: 10px;
}

.flow-panel-body {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
}

.flow-locked {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.flow-locked svg {
  width: 30px;
  height: 30px;
  color: var(--primary);
}

.flow-locked strong {
  color: var(--text);
}

.flow-locked p {
  max-width: 440px;
  margin: 4px 0 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.stat-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  margin: 14px 0 4px;
  font-size: var(--fs-num);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.stat-detail {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field span {
  color: var(--muted-strong);
  font-size: var(--fs-rubrica);
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--papel);
  /* SC 1.4.11: o limite do controle precisa de 3:1 contra o papel. --regua-3 dá 3,48:1. */
  border: 1px solid var(--regua-3);
  border-radius: var(--r);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

/* O anel de foco global (:focus-visible) precisa alcançar os campos: só o clique de mouse fica sem anel. */
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible) {
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--tinta-3);
  opacity: 1;
}

.field textarea {
  min-height: 82px;
  resize: vertical;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}

.check-field input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.check-field:hover,
.check-field:has(input:checked) {
  background: var(--papel-2);
  border-color: var(--oficial-bg);
  box-shadow: var(--anel-foco);
}

.check-field.compact {
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--fs-rubrica);
}

/* Modulo 1 - grau de periculosidade, riscos e kit de EPIs do setor */
.risk-level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Escala de grau. É sequência de verdade (I a IV), então o numeral manda: selo
   redondo na tinta do grau, cheio quando marcado. O título é só a palavra da
   severidade; "Grau 1" vira legenda. Antes rádio, numeral e "Grau 1 ·
   Tolerável" disputavam a mesma linha e o título quebrava ou era cortado.
   O rádio cobre o cartão inteiro, invisível: clique e teclado continuam sendo
   do input, e o foco de teclado aparece em volta do cartão. */
.risk-level-option {
  --grau: var(--selo);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
  padding: 14px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r-sm);
}

.risk-level-option[data-level="2"] {
  --grau: var(--ambar);
}

.risk-level-option[data-level="3"] {
  --grau: var(--laranja);
}

.risk-level-option[data-level="4"] {
  --grau: var(--carimbo);
}

.risk-level-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.risk-level-option:has(input:focus-visible) {
  outline: 2px solid var(--marca-acao);
  outline-offset: 2px;
}

/* Portador redundante do grau: algarismo romano, legível sem cor. */
.risk-level-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--grau);
  font-family: var(--serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--grau);
  border-radius: 50%;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.risk-level-option:has(input:checked) .risk-level-num {
  color: var(--papel);
  background: var(--grau);
}

.risk-level-texto {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.risk-level-texto strong {
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.25;
}

.risk-level-texto small {
  color: var(--grau);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.risk-level-texto span {
  margin-top: 4px;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.risk-level-option[data-level="1"]:has(input:checked) {
  background: var(--selo-bg);
  border-color: var(--selo);
  box-shadow: 0 0 0 3px var(--selo-bg);
}

.risk-level-option[data-level="2"]:has(input:checked) {
  background: var(--ambar-bg);
  border-color: var(--ambar);
  box-shadow: 0 0 0 3px var(--ambar-bg);
}

.risk-level-option[data-level="3"]:has(input:checked) {
  background: var(--laranja-bg);
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px var(--laranja-bg);
}

.risk-level-option[data-level="4"]:has(input:checked) {
  background: var(--carimbo-bg);
  border-color: var(--carimbo);
  box-shadow: 0 0 0 3px var(--carimbo-bg);
}

.risk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risk-chips .check-field {
  min-height: 36px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
}

/* Chip de risco: rotulo leigo + legenda no vocabulario tecnico do PGR. */
.risk-chip {
  flex: 1 1 260px;
  max-width: 100%;
  align-items: flex-start;
}

.risk-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.risk-chip-text strong {
  font-weight: 700;
}

.risk-chip-tech {
  font-size: var(--fs-rubrica);
  font-weight: 600;
  color: var(--muted);
}

/* Referencia legal do enquadramento de periculosidade (NR-16, anexo x). */
.risk-chip-lei {
  font-size: var(--fs-rubrica);
  font-weight: 700;
  color: var(--tinta-3);
  letter-spacing: 0.03em;
}

.hazard-insalubridade {
  margin-top: 8px;
  align-items: flex-start;
}

/* Aviso do conflito periculosidade x insalubridade (CLT art. 193, 2o). */
.nota-alerta {
  color: var(--tinta);
  background: var(--carimbo-bg);
  border-left-color: var(--carimbo);
}

/* Painel de confirmacao individual no dossie do colaborador. */
.hazard-panel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--regua);
}

.kit-ca-ref {
  font-weight: 700;
}

.kit-list {
  display: grid;
  gap: 8px;
}

.kit-group {
  margin: 8px 0 0;
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

.kit-item {
  align-items: flex-start;
  flex-wrap: wrap;
}

.kit-item .cell-main {
  flex: 1 1 240px;
}

.kit-item .badge {
  align-self: center;
}

.kit-item.special,
.kit-item.special:has(input:checked) {
  border-color: var(--oliva-bg);
  background: var(--violet-soft);
}

.kit-item:not(.special):not(:has(input[name="kitItem"]:checked)):not(:has(input[name="kitEpiIds"]:checked)) {
  background: var(--surface-soft);
  border-color: var(--line);
  box-shadow: none;
}

/* Procedencia da FDS na linha do kit: de qual produto veio a exigencia. */
.kit-fds {
  font-size: var(--fs-rubrica);
  font-weight: 700;
  color: var(--carimbo);
  letter-spacing: 0.02em;
}

.kit-item-fds {
  border-left: 3px solid var(--carimbo);
}

/* Justificativa obrigatoria de EPI exigido por FDS que ficou fora do kit. */
.kit-fds-justificativa {
  flex: 1 1 100%;
  margin-top: 6px;
}

.kit-fds-nota {
  margin-bottom: 8px;
}

.kit-special-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}

.kit-pending {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.kit-pending-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--amber-soft);
  border: 1px solid var(--ambar-bg);
  border-radius: var(--radius);
}

.legal-box,
.legal-print-box {
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-box.full {
  grid-column: 1 / -1;
}

.legal-box strong,
.legal-print-box h4 {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
}

.legal-box p,
.legal-print-box p {
  margin: 0 0 8px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

.legal-box ul,
.legal-print-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.legal-print-box {
  margin: 12px 0;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

/* Aviso da caixa legal: a redacao exibida e a de hoje, nao a assinada. So
   aparece quando a versao gravada no registro nao tem texto arquivado. */
.legal-aviso {
  margin: 8px 0 0;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
  line-height: 1.4;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  transform: translateY(-1px);
  background: var(--papel);
  border-color: var(--primary);
  box-shadow: var(--anel-foco);
}

.field.compact {
  min-width: 230px;
}

.field.compact select {
  min-height: 38px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.primary-button,
.secondary-button,
.danger-button,
.table-action {
  position: relative;
  overflow: hidden;
  padding: 9px 12px;
  font-weight: 700;
}

.primary-button {
  color: var(--papel);
  background: var(--tinta);
  border-color: var(--tinta);
}

.primary-button:hover {
  background: var(--tinta-2);
  border-color: var(--tinta-2);
  box-shadow: var(--sombra-baixa);
}

.secondary-button {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--regua-3);
}

.secondary-button:hover {
  background: var(--papel-2);
  border-color: var(--tinta-3);
  box-shadow: var(--sombra-baixa);
}

.danger-button {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--carimbo);
}

.danger-button:hover {
  background: var(--carimbo-bg);
  box-shadow: var(--sombra-baixa);
}

.icon-button {
  width: 40px;
  height: 40px;
  color: var(--muted-strong);
  background: var(--papel);
  border-color: var(--regua-3);
}

.icon-button:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--sombra-baixa);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.toolbar .field {
  min-width: min(280px, 100%);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--papel);
}

th,
td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--papel-2);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

tbody tr:hover td {
  background: var(--papel-2);
}

.cell-main {
  display: grid;
  gap: 3px;
}

.cell-main strong {
  font-size: var(--fs-body);
}

.cell-main span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.table-action {
  min-height: 32px;
  padding: 7px 9px;
  color: var(--muted-strong);
  background: var(--papel);
  border-color: var(--line);
}

.table-action:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--sombra-baixa);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  line-height: 1.2;
}

/* Sem border-color aqui: o contorno de tinta vem do bloco do selo de documento
   mais abaixo (--b-tinta). Pintar a borda na cor do preenchimento apagava o
   contorno e o tracejado de "a vencer". */
.badge.ok {
  color: var(--green);
  background: var(--green-soft);
}

.badge.info {
  color: var(--blue);
  background: var(--blue-soft);
}

.badge.warn {
  color: var(--amber);
  background: var(--amber-soft);
}

.badge.danger {
  color: var(--red);
  background: var(--red-soft);
}

.badge.violet {
  color: var(--violet);
  background: var(--violet-soft);
}

.badge.high {
  color: var(--laranja);
  background: var(--laranja-bg);
}

.alert-list {
  display: grid;
  gap: 10px;
}

.alert-row {
  position: relative;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.alert-row:hover {
  transform: translateY(-2px);
  border-color: var(--oficial-bg);
  box-shadow: var(--shadow-lift);
}

.alert-row::before {
  content: "";
  width: 8px;
  height: 100%;
  min-height: 44px;
  background: var(--blue);
  border-radius: var(--r);
  box-shadow: var(--sombra-baixa);
}

.alert-row[data-severity="warn"]::before {
  background: var(--amber);
}

.alert-row[data-severity="danger"]::before {
  background: var(--red);
}

.alert-row strong {
  display: block;
  margin-bottom: 2px;
}

.alert-row p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.alert-date {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 112px;
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 22px;
  color: var(--muted);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(251, 250, 246, 0.82), rgba(251, 250, 246, 0.96)),
    repeating-linear-gradient(135deg, rgba(31, 78, 121, 0.04) 0 8px, transparent 8px 16px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  animation: fade-up var(--dur-3) var(--ease) both;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-item {
  display: grid;
  gap: 6px;
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}

.bar-track {
  height: 12px;
  overflow: hidden;
  background: var(--regua);
  border-radius: var(--r);
  box-shadow: none;
}

.bar-fill {
  height: 100%;
  min-width: 2px;
  background: linear-gradient(90deg, var(--primary), var(--selo));
  border-radius: inherit;
  transform-origin: left;
  animation: meter-sweep var(--dur-3) var(--ease) both;
}

.bar-fill.warn {
  background: linear-gradient(90deg, var(--amber), var(--ambar));
}

.bar-fill.danger {
  background: linear-gradient(90deg, var(--red), var(--carimbo));
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.summary-item {
  min-height: 74px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.summary-item:hover,
.account-metric:hover {
  border-color: var(--regua-2);
  box-shadow: var(--sombra-folha);
}

.summary-item span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  text-transform: uppercase;
}

.summary-item strong {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-h2);
}

.epi-command,
.ficha-command {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--papel), var(--papel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.view > .epi-command,
.view > .epi-metric-grid,
.view > .epi-catalog-layout,
.view > .ficha-command,
.view > .ficha-metric-grid,
.view > .ficha-generator-panel {
  animation: none;
  opacity: 1;
  transform: none;
}

.ficha-command {
  background: linear-gradient(180deg, var(--papel), var(--papel-2));
}

.epi-command::after,
.ficha-command::after {
  position: absolute;
  inset: 0;
  content: "";
  background: none;
  transform: translateX(-130%);
  pointer-events: none;
}

.epi-command:hover::after,
.ficha-command:hover::after {
  animation: none;
}

.epi-command h2,
.ficha-command h2 {
  margin: 4px 0 7px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0;
}

.epi-command p,
.ficha-command p,
.epi-command .eyebrow,
.ficha-command .eyebrow {
  color: var(--muted);
}

.epi-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.epi-metric-grid,
.ficha-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.epi-metric-card,
.ficha-metric-card {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.ficha-metric-card {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
}

.epi-metric-card:hover,
.ficha-metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--oficial-bg);
  box-shadow: var(--shadow-lift);
}

.epi-metric-card span,
.ficha-metric-card span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
}

.epi-metric-card strong,
.ficha-metric-card strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-h1);
  line-height: 1;
}

.epi-metric-card small {
  color: var(--muted);
}

.epi-metric-card.danger {
  border-color: var(--carimbo-bg);
}

.ficha-metric-card svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: var(--r);
}

/* O catálogo ocupa a linha inteira e "Últimas fichas" desce para baixo dele.
   Dividindo a linha, a tabela ficava com 644px numa tela de 1366 e pedia
   1268: o CA, as validades e o estoque só apareciam arrastando para o lado. */
.epi-catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* A tabela cabe na folha: o texto de apoio quebra dentro da célula em vez de
   empurrar a coluna. A coluna Fabricante saiu — ele já está sob o nome. */
/* Seletor com as duas classes de propósito: as regras gerais de tabela
   (".table-wrap table td" e ".table-wrap .cell-main span", com nowrap, e o
   min-width de 720px em "table") vêm depois no arquivo e ganhavam desta. */
.table-wrap.epi-management-table table {
  width: 100%;
  min-width: 0;
}

.table-wrap.epi-management-table table th,
.table-wrap.epi-management-table table td,
.table-wrap.epi-management-table .cell-main strong,
.table-wrap.epi-management-table .cell-main span,
.table-wrap.epi-management-table .cell-main small {
  white-space: normal;
}

.epi-photo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--oficial-bg);
  border-radius: var(--r);
}

.epi-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.epi-photo svg {
  width: 20px;
  height: 20px;
}

/* Foto do catálogo é botão: o clique abre a foto ampliada. */
.epi-photo-ampliar {
  padding: 0;
  cursor: zoom-in;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.epi-photo-ampliar:hover {
  border-color: var(--oficial);
  box-shadow: var(--anel-foco);
}

/* A foto ampliada ocupa a janela quase toda, sem cortar: "contain", nunca
   "cover" — é para conferir o equipamento, não para enfeitar. */
dialog.foto-ampliada {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.foto-ampliada img {
  display: block;
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  background: var(--papel-2);
}

.foto-ampliada-pe {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--regua);
}

.foto-ampliada-pe p {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 700;
}

.cell-main small {
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.latest-delivery-list {
  display: grid;
  gap: 10px;
}

.latest-delivery-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.latest-delivery-item:hover {
  transform: translateY(-1px);
  border-color: var(--oficial-bg);
  box-shadow: var(--shadow-soft);
}

.latest-delivery-item strong,
.latest-delivery-item span,
.latest-delivery-item small {
  display: block;
}

.latest-delivery-item span,
.latest-delivery-item small {
  color: var(--muted);
}

.ficha-generator-panel .panel-body {
  padding-top: 14px;
}

.ficha-generator-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.login-panel .account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-metric {
  min-height: 92px;
  padding: 14px;
  background: linear-gradient(180deg, var(--papel), var(--surface-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.account-metric span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-metric strong {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-h3);
  overflow-wrap: anywhere;
}

.account-metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.saas-view {
  gap: 18px;
}

.saas-command {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--papel), var(--papel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.saas-command .eyebrow,
.saas-command p {
  color: var(--muted);
}

.saas-command h2 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0;
}

.saas-command p {
  max-width: 760px;
  margin: 0;
}

.saas-command-actions {
  display: flex;
  justify-content: flex-end;
}

.saas-metrics {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
}

.saas-admin-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.saas-admin-grid.lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saas-backup-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(320px, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}

.backup-status-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.backup-status-card.warn {
  border-left-color: var(--amber);
}

.backup-status-card span,
.backup-metrics span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
}

.backup-status-card strong {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-lg);
}

.backup-status-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.backup-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 10px;
}

.backup-metrics div {
  min-height: 92px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.backup-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-h2);
}

.backup-actions {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.backup-action-hint {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  line-height: 1.4;
}

.backup-file-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  cursor: pointer;
}

.backup-file-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.backup-client-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.backup-client-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.backup-client-row strong,
.backup-client-row span,
.backup-client-meta small {
  display: block;
}

.backup-client-row span,
.backup-client-meta small {
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.backup-client-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.backup-client-actions {
  display: grid;
  gap: 8px;
}

.backup-client-actions .backup-file-action {
  width: 100%;
}

.approval-queue,
.admin-timeline,
.deployment-list {
  display: grid;
  gap: 10px;
}

.approval-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.approval-card:hover {
  transform: translateY(-2px);
  border-color: var(--oficial-bg);
  box-shadow: var(--shadow-lift);
}

.approval-main,
.tenant-detail-head,
.deployment-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.approval-main strong,
.tenant-detail h3 {
  margin: 0;
}

.approval-main span,
.approval-card p,
.tenant-detail-head p,
.detail-block small,
.deployment-item span {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.approval-card p {
  margin: 0;
}

.approval-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.progress-line {
  height: 8px;
  overflow: hidden;
  background: var(--regua);
  border-radius: var(--r);
}

.progress-line span {
  display: block;
  height: 100%;
  min-width: 3px;
  background: linear-gradient(90deg, var(--primary), var(--blue));
  border-radius: inherit;
  transform-origin: left;
  animation: meter-sweep 840ms var(--ease) both;
}

.tenant-detail {
  display: grid;
  gap: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-block,
.admin-note,
.deployment-item {
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.detail-block:hover,
.admin-note:hover,
.deployment-item:hover {
  transform: translateY(-2px);
  border-color: var(--oficial-bg);
  box-shadow: var(--shadow-soft);
}

.detail-block span,
.admin-note strong,
.admin-timeline > strong {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
}

.detail-block strong {
  display: block;
  margin: 6px 0;
  font-size: var(--fs-lg);
}

.saas-usage-strip {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}

.tenant-detail-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.admin-note p {
  margin: 8px 0 0;
  color: var(--muted-strong);
}

.timeline-item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-item:last-child {
  border-bottom: 0;
}

.timeline-item span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 700;
}

.timeline-item p {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}

.admin-toolbar {
  align-items: end;
}

.admin-toolbar .field:first-child {
  flex: 1 1 360px;
}

.admin-table-wrap table {
  min-width: 1120px;
}

.selected-row td {
  background: var(--oficial-bg);
}

.mini-usage {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.danger-action {
  color: var(--red);
}

.deployment-item strong,
.deployment-item span {
  display: block;
}

.deployment-item strong {
  margin-bottom: 4px;
}

.lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.print-sheet {
  display: grid;
  gap: 16px;
}

.sheet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sheet-header h3 {
  margin: 0 0 6px;
}

.sheet-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.signature-line {
  min-width: 260px;
  padding-top: 38px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--line-strong);
}

.audit-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--papel), var(--papel-2));
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.audit-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: none;
  transform: translateX(-130%);
  pointer-events: none;
}

.audit-hero:hover::after {
  animation: none;
}

.audit-hero h3 {
  margin: 4px 0 8px;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0;
}

.audit-hero p,
.audit-hero .eyebrow {
  color: var(--muted);
}

.audit-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.audit-metrics div {
  min-height: 84px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.audit-metrics span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
}

.audit-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-num);
}

/* Um bloco por linha, na largura toda. Em duas colunas "Funcionários
   cadastrados" e o "Checklist mensal" ficavam com metade da tela cada, e as
   tabelas deles (próxima ficha, assinaturas, situação, status) só apareciam
   arrastando para o lado. */
.audit-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* Em 1366 a largura toda ainda não bastava: as regras gerais de tabela
   (nowrap nas células e no .cell-main, min-width de 720px) empurravam o
   "Checklist mensal" 138px para fora. O texto quebra dentro da célula. Só na
   tela: .audit-section-grid é no-print, o papel tem as próprias regras. */
.audit-section-grid .audit-block .table-wrap table {
  min-width: 0;
}

.audit-section-grid .audit-block .table-wrap table th,
.audit-section-grid .audit-block .table-wrap table td,
.audit-section-grid .audit-block .table-wrap .cell-main strong,
.audit-section-grid .audit-block .table-wrap .cell-main span {
  white-space: normal;
}

@media (max-width: 900px) {
  .audit-section-grid .audit-block .table-wrap table {
    min-width: 720px;
  }
}

/* Destinos da fila de providências: o timbre é fixo no topo e cobriria o
   começo do formulário para onde o clique leva. */
#epiForm,
#sectorForm,
#chemicalProductForm,
#aso-painel,
.employee-detail-panel {
  scroll-margin-top: 150px;
}

.audit-block {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  animation: fade-up var(--dur-3) var(--ease) both;
}

.audit-block.wide {
  grid-row: span 2;
}

.audit-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.audit-block-header h3,
.audit-print-intro h3,
.audit-ficha-top h3,
.audit-checklist-box h4 {
  margin: 0 0 4px;
}

.audit-block-header p,
.audit-print-intro p {
  margin: 0;
  color: var(--muted);
}

.audit-table table {
  min-width: 980px;
}

.audit-table.compact table {
  min-width: 760px;
}

/* A folha "EPIs a vencer, por colaborador": nome na frente, equipamentos ao
   lado. Substituiu a lista de alertas soltos — para saber o que uma pessoa tem
   para trocar era preciso varrer todas as linhas procurando o nome dela.
   Duas colunas de largura fixa em proporção: a esquerda identifica, a direita
   enumera. As linhas da direita são pautadas, não são cartões: cada uma é um
   item de conferência, e cartão flutuante aqui viraria ruído. */
/* A folha ocupa a largura toda da grade: são duas colunas de conteúdo, e
   espremê-la numa das colunas da grade de auditoria obrigava a rolagem
   horizontal. (`.audit-block.wide` engana pelo nome — vale duas LINHAS de
   altura, não largura.) */
.vencer-bloco {
  grid-column: 1 / -1;
}

.vencer-tabela table {
  table-layout: fixed;
  /* A tabela geral de auditoria tem oito colunas e por isso exige 980px. Esta
     tem duas e é fluida: qualquer mínimo herdado criava barra de rolagem à toa,
     e um mínimo próprio só empurrava o problema para uma tela mais estreita.
     Quem cuida do aperto é a quebra de linha dentro da célula. */
  min-width: 0;
}

.vencer-tabela th:nth-child(1),
.vencer-tabela td:nth-child(1) {
  width: 28%;
}

/* A célula continua sendo célula. `display: grid` num <td> tira dele o
   comportamento de table-cell: o navegador cria uma célula anônima em volta, e
   o resultado é fio de tabela solto no meio do nada e a faixa zebrada cobrindo
   só parte da linha. Quem vira grade é a caixa DENTRO da célula. */
.vencer-pessoa {
  vertical-align: top;
}

.vencer-pessoa-corpo {
  display: grid;
  gap: var(--s2);
  align-content: start;
  justify-items: start;
}

/* Empresa · filial · setor cabe inteiro aqui: a coluna é larga e sobra altura.
   Reticências numa folha de conferência escondem justamente o que diz ONDE a
   pessoa trabalha. O `.table-wrap` embaixo trunca de propósito, para o
   livro-razão não empurrar a tabela para fora da página — mas esta tabela é
   fluida e tem espaço, então o seletor precisa ser mais específico que aquele. */
.table-wrap .vencer-pessoa-corpo .cell-main strong,
.table-wrap .vencer-pessoa-corpo .cell-main span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.vencer-lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada equipamento numa pauta. A tinta da margem esquerda diz a gravidade sem
   depender de cor sozinha: o selo ao lado carrega a palavra. */
.vencer-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-bottom: 1px solid var(--regua);
  border-left: 2px solid var(--regua-2);
}

/* O nome do equipamento manda na linha e empurra o resto para a direita; se a
   coluna aperta, o prazo desce em vez de a tabela ganhar barra de rolagem.
   Grade rígida aqui cortava o selo do prazo fora da folha impressa. */
.vencer-epi {
  flex: 1 1 13rem;
}

.vencer-motivo,
.vencer-data {
  flex: 0 0 auto;
}

.vencer-item:last-child {
  border-bottom: 0;
}

.vencer-item.warn {
  border-left-color: var(--ambar);
}

.vencer-item.danger {
  border-left-color: var(--carimbo);
}

.vencer-epi {
  display: grid;
  gap: 1px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vencer-epi strong {
  color: var(--tinta);
  font-size: var(--fs-body);
}

.vencer-epi em {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-style: normal;
}

.vencer-motivo {
  color: var(--tinta-3);
  white-space: nowrap;
}

.vencer-data {
  color: var(--tinta);
  font-size: var(--fs-rubrica);
  white-space: nowrap;
}

.vencer-legenda {
  margin-top: var(--s3);
}

/* No celular duas colunas lado a lado não cabem em largura nenhuma: a folha
   empilha. O nome vira o título do bloco e os equipamentos vêm embaixo dele —
   é a mesma leitura, virada 90 graus. Rolagem horizontal numa folha de
   conferência é pior do que empilhar: quem confere no chão de fábrica está com
   o celular numa mão só. */
@media (max-width: 900px) {
  .vencer-tabela table,
  .vencer-tabela tbody,
  .vencer-tabela tr,
  .vencer-tabela td {
    display: block;
    width: auto;
    table-layout: auto;
  }

  .vencer-tabela thead {
    /* Sem as duas colunas, o cabeçalho não rotula mais nada. */
    display: none;
  }

  .vencer-tabela tr {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--regua-2);
  }

  .vencer-tabela tr:last-child {
    border-bottom: 0;
  }

  .vencer-pessoa {
    padding: 0 0 var(--s2);
  }

  .vencer-pessoa-corpo {
    gap: var(--s1);
  }

  .vencer-equipamentos {
    padding: 0;
  }

  .vencer-epi {
    flex: 1 1 100%;
  }
}

.audit-print-pack {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.audit-print-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--papel-2);
  border: 1px solid var(--oficial-bg);
  border-radius: var(--radius);
}

.audit-ficha-sheet {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.audit-ficha-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.audit-ficha-top p {
  margin: 2px 0;
  color: var(--muted);
}

.audit-ficha-status {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 180px;
}

.audit-ficha-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-ficha-status strong {
  font-size: 20px;
}

.audit-checklist-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.checklist-grid span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}

.checklist-grid i {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1px solid var(--regua-3);
  border-radius: var(--r);
}

.audit-ficha-records table {
  min-width: 760px;
}

.audit-empty-record {
  padding: 13px;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--ambar-bg);
  border-radius: var(--radius);
}

.signature-dual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.signature-box {
  display: grid;
  gap: 8px;
  min-height: 110px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.signature-box > span {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
}

.signature-box p,
.signature-box small {
  margin: 0;
  color: var(--muted);
}

.manual-line {
  align-self: end;
  min-height: 42px;
  border-bottom: 1px solid var(--line-strong);
}

.digital-trail {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.digital-trail li {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}

.digital-trail li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.digital-trail span,
.digital-trail small {
  color: var(--muted);
  font-size: var(--fs-rubrica);
  overflow-wrap: anywhere;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 36px));
  padding: 13px 15px;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Aviso de versão nova: diferente do toast, fica até a pessoa agir e o botão
   recebe clique (o toast tem pointer-events: none). */
.aviso-versao {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  color: var(--tinta);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-left: 4px solid var(--oficial);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--sombra-alta);
  transform: translateX(-50%);
  animation: fade-up 260ms var(--ease) both;
}

@media print {
  .aviso-versao {
    display: none;
  }
}

.mobile-menu {
  display: none;
}

.training-view {
  display: grid;
  gap: 18px;
}

.training-command {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--line);
}

.training-command h2 {
  margin: 3px 0 5px;
  font-size: var(--fs-h1);
}

.training-command p {
  margin: 0;
  color: var(--muted);
}

.training-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.training-metric {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.training-metric:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.training-metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: var(--r);
  color: var(--primary);
  background: var(--blue-soft);
}

.training-metric[data-tone="blue"] .training-metric-icon {
  color: var(--oficial);
  background: var(--oficial-bg);
}

.training-metric[data-tone="amber"] .training-metric-icon {
  color: var(--ambar);
  background: var(--ambar-bg);
}

.training-metric[data-tone="red"] .training-metric-icon {
  color: var(--carimbo);
  background: var(--carimbo-bg);
}

.training-metric div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.training-metric div span {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.training-metric strong {
  font-size: var(--fs-h1);
  line-height: 1;
}

.training-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-soft);
}

.training-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 0 190px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--muted-strong);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.training-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.training-tab.active {
  color: var(--primary);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--sombra-baixa);
}

.training-tab svg,
.training-metric svg {
  width: 19px;
  height: 19px;
}

.training-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(520px, 1.3fr);
  align-items: start;
  gap: 16px;
}

.training-layout.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-stack {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.training-form-panel {
  position: sticky;
  top: 18px;
}

.training-data-panel .table-wrap,
.training-compliance-table {
  max-height: 620px;
  overflow: auto;
}

.training-data-panel thead,
.training-compliance-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.compliance-meter {
  min-width: 126px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.compliance-meter > div {
  width: 82px;
  height: 7px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--line);
}

.compliance-meter > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.compliance-meter strong {
  font-size: var(--fs-rubrica);
}

.upload-field input[type="file"] {
  padding: 8px;
  background: var(--surface-soft);
}

.upload-field small,
.muted-text {
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.attachment-actions {
  min-width: 98px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-grid.employee-detail-open {
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
}

.employee-detail {
  display: grid;
  gap: 16px;
  align-content: start;
  /* a capa do dossie nao pode abrir escondida atras do timbre sticky. */
  scroll-margin-top: calc(var(--topbar-h) + var(--s4));
}

.view-grid.employee-detail-open {
  scroll-margin-top: calc(var(--topbar-h) + var(--s4));
}

.employee-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.employee-detail-title h3 {
  margin: 0;
  font-size: var(--fs-h3);
}

.employee-detail-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.employee-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-rubrica);
}

.employee-tabs .training-tab {
  flex: 1 0 122px;
  padding: 9px 10px;
}

.employee-tab-panel {
  display: grid;
  gap: 14px;
}

.employee-tab-actions {
  display: flex;
  justify-content: flex-end;
}

.detail-grid.employee-data-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.employee-data-grid .detail-block strong {
  font-size: var(--fs-md);
  word-break: break-word;
}

.employee-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-rubrica);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.employee-epi-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.employee-epi-chip {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: var(--fs-rubrica);
}

.employee-hash {
  font-size: var(--fs-rubrica);
  color: var(--muted-strong);
  word-break: break-all;
}

/* ============================================================
   PASSO 2 — COMPONENTES DA LINGUAGEM "DOCUMENTO"
   Traduzidos do protótipo design/documento/prototipo.html.
   Nenhuma classe muda de nome: só o estilo é reescrito.
   ============================================================ */

/* Piso tipográfico: <small> herdava 0.83em (11,7px) e furava o
   mínimo de 12px do design system. */
small {
  font-size: var(--fs-rubrica);
}

/* ------------------------------------------------------------
   1. SELOS DE ESTADO — símbolo + palavra + cor
   O glifo entra por variável CSS, de modo que TODO badge do app
   (inclusive os escritos à mão no markup) ganhe o símbolo sem
   depender de mudança em app.js.
   ------------------------------------------------------------ */
.badge {
  --b-tinta: var(--tinta-3);
  --b-fundo: var(--papel-2);
  --b-glifo: "\2022";
  gap: 6px;
  min-height: 22px;
  padding: 2px 8px 2px 5px;
  color: var(--b-tinta);
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  text-wrap: balance;
  background-color: var(--b-fundo);
  border: 1px solid var(--b-tinta);
  border-radius: var(--r);
  box-shadow: none;
}

.badge::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--papel);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  line-height: 1;
  content: var(--b-glifo);
  background: var(--b-tinta);
  border-radius: 50%;
}

.badge.ok {
  --b-tinta: var(--selo);
  --b-fundo: var(--selo-bg);
  --b-glifo: "\2713";
}

.badge.info {
  --b-tinta: var(--oficial);
  --b-fundo: var(--oficial-bg);
  --b-glifo: "i";
}

.badge.warn {
  --b-tinta: var(--ambar);
  --b-fundo: var(--ambar-bg);
  --b-glifo: "!";
  border-style: dashed;
}

.badge.danger {
  --b-tinta: var(--carimbo);
  --b-fundo: var(--carimbo-bg);
  --b-glifo: "\2715";
  border-width: 1.5px;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 34%, transparent) 0 2px, transparent 2px 6px);
}

.badge.violet {
  --b-tinta: var(--oliva);
  --b-fundo: var(--oliva-bg);
  --b-glifo: "\A7";
}

.badge.high {
  --b-tinta: var(--laranja);
  --b-fundo: var(--laranja-bg);
  --b-glifo: "\25B2";
  border-width: 2px;
}

/* ------------------------------------------------------------
   2. ÍNDICE LATERAL — algarismo romano, pontilhado e contador
   ------------------------------------------------------------ */
.indice-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 20px;
}

.indice-titulo::after {
  flex: 1;
  content: "";
  border-bottom: 1px solid var(--regua);
}

.nav-num {
  flex: none;
  width: 20px;
  color: var(--tinta-3);
  font-family: var(--serif);
  font-size: var(--fs-rubrica);
  letter-spacing: 0.04em;
}

.nav-label {
  font-family: var(--serif);
  font-size: var(--fs-md);
  white-space: nowrap;
}

.nav-leader {
  flex: 1;
  min-width: 8px;
  border-bottom: 1px dotted var(--regua-2);
  transform: translateY(-4px);
}

/* Toda caixinha do índice é pendência — nunca total. Por isso todas usam a
   mesma tinta de carimbo do protótipo, e não um cinza neutro. */
.nav-count {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  padding: 1px 5px;
  color: var(--carimbo);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  text-align: center;
  background: var(--carimbo-bg);
  border: 1px solid var(--carimbo);
  border-radius: 1px;
}

.nav-count.pendencia {
  font-weight: 700;
}

.nav-item svg {
  align-self: center;
  width: 15px;
  height: 15px;
  color: var(--tinta-3);
}

.nav-item:hover,
.nav-item.active {
  transform: none;
  color: var(--tinta);
  background: var(--papel-3);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--oficial);
}

.nav-item.active .nav-label {
  font-weight: 700;
}

.nav-item:hover svg,
.nav-item.active svg {
  color: var(--oficial);
}

.ghost-button svg {
  color: var(--tinta-3);
}

/* ------------------------------------------------------------
   4. FOLHA E ABA DE PASTA — o painel vira papel arquivado
   ------------------------------------------------------------ */
.panel {
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
  box-shadow: var(--sombra-folha);
}

.panel:hover {
  border-color: var(--regua-2);
  box-shadow: var(--sombra-folha);
}

.panel::before {
  display: none;
}

.employee-detail > .aba-folha {
  margin: -18px -18px 0;
}

.aba-folha {
  display: block;
  margin: 0;
  padding: 6px 18px 5px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--regua);
}

.panel-header {
  align-items: flex-start;
  padding: 16px 18px 12px;
  border-bottom: var(--regua-dupla);
}

.panel-header h2,
.panel-header h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
}

.panel-header p {
  max-width: 68ch;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   5. MARGINÁLIA DE NORMA — referência legal à esquerda do item
   ------------------------------------------------------------ */
.legal-box,
.legal-print-box {
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-left: 3px solid var(--oficial);
  border-radius: 0 var(--r) var(--r) 0;
}

.legal-box strong,
.legal-print-box h4 {
  color: var(--oficial);
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.legal-box p,
.legal-print-box p {
  font-size: var(--fs-sm);
}

.doc-lista {
  display: grid;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.doc-lista li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--regua);
}

.doc-lista li:first-child {
  border-top: 1.5px solid var(--tinta);
}

.doc-lista li:last-child {
  border-bottom: 1.5px solid var(--tinta);
}

.doc-marg {
  padding-right: 14px;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  line-height: 1.3;
  text-align: right;
  border-right: 1px solid var(--regua);
}

.doc-corpo {
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* ------------------------------------------------------------
   6. INDICADORES DO PAINEL — ficha de índice com régua hachurada
   ------------------------------------------------------------ */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 13px 14px 14px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r);
  box-shadow: var(--sombra-folha);
}

.stat-card::before {
  display: none;
}

.stat-card:hover {
  transform: none;
  border-color: var(--regua-2);
  box-shadow: var(--sombra-alta);
}

.stat-card[data-tone="blue"] {
  border-top-color: var(--oficial);
}

.stat-card[data-tone="green"] {
  border-top-color: var(--selo);
}

.stat-card[data-tone="violet"] {
  border-top-color: var(--oliva);
}

.stat-card[data-tone="amber"] {
  border-top-color: var(--ambar);
}

.stat-card[data-tone="red"] {
  border-top-color: var(--carimbo);
}

.stat-label {
  font-size: var(--fs-rubrica);
  letter-spacing: 0.13em;
}

.stat-value {
  margin: 8px 0 2px;
  font-family: var(--serif);
  font-size: var(--fs-carimbo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-detail {
  margin-top: auto;
  font-size: var(--fs-rubrica);
  line-height: 1.35;
}

/* régua de progresso hachurada */
.bar-track {
  height: 12px;
  background: var(--papel-3);
  border: 1px solid var(--regua);
  border-radius: 1px;
  box-shadow: none;
}

/* As tres reguas de progresso usam o mesmo desenho: hachura fina sobre a
   lavagem do tom, com filete interno. O neutro nao pode ficar sendo a unica
   barra chapada da tela. */
.bar-fill {
  background-color: var(--oficial-bg);
  background-image: repeating-linear-gradient(45deg, var(--oficial) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px var(--oficial);
  border-radius: 0;
}

.bar-fill.warn {
  background-color: var(--ambar-bg);
  background-image: repeating-linear-gradient(45deg, var(--ambar) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px var(--ambar);
}

.bar-fill.danger {
  background-color: var(--carimbo-bg);
  background-image: repeating-linear-gradient(45deg, var(--carimbo) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px var(--carimbo);
}

.bar-meta {
  color: var(--tinta-2);
  font-size: var(--fs-sm);
}

.summary-item {
  padding: 12px 13px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r);
}

.summary-item:hover,
.account-metric:hover {
  transform: none;
  border-color: var(--regua-2);
  box-shadow: var(--sombra-folha);
}

.summary-item span {
  font-size: var(--fs-rubrica);
  letter-spacing: 0.11em;
}

.summary-item strong {
  font-family: var(--serif);
  font-size: var(--fs-h1);
}

/* ------------------------------------------------------------
   7. LINHA DO TEMPO DE VENCIMENTOS — 12 meses
   ------------------------------------------------------------ */
.lt-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.lt {
  display: flex;
  min-width: 900px;
}

.lt-mes {
  position: relative;
  display: flex;
  flex: 1 0 78px;
  flex-direction: column;
  justify-content: flex-end;
}

.lt-marcas {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-height: 132px;
  padding: 0 3px 6px;
}

.lt-eixo {
  height: 8px;
  border-top: 1.5px solid var(--tinta);
  border-left: 1px solid var(--regua-2);
}

.lt-mes:last-child .lt-eixo {
  border-right: 1px solid var(--regua-2);
}

.lt-rot {
  padding: 5px 3px 0;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.lt-rot b {
  display: block;
  font-size: var(--fs-rubrica);
  font-weight: 700;
}

.lt-mes.hoje .lt-rot {
  color: var(--oficial);
  font-weight: 700;
}

.lt-mes.hoje .lt-eixo {
  border-top-color: var(--oficial);
  border-top-width: 3px;
}

/* Marca da linha do tempo: mesmo mecanismo de glifo do selo, para que
   VÁLIDO, A VENCER e VENCIDO se distingam sem depender do matiz. */
.mk {
  --mk-glifo: "\2022";
  --mk-tinta: var(--tinta-3);
  position: relative;
  display: block;
  padding: 3px 4px 3px 21px;
  font-size: var(--fs-rubrica);
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  border: 1px solid;
  border-radius: var(--r);
}

.mk::before {
  position: absolute;
  top: 3px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--papel);
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  line-height: 1;
  content: var(--mk-glifo);
  background: var(--mk-tinta);
  border-radius: 50%;
}

.mk small {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  font-weight: 400;
  opacity: 0.85;
}

.mk-ok {
  --mk-glifo: "\2713";
  --mk-tinta: var(--selo);
  color: var(--selo);
  background: var(--selo-bg);
  border-color: var(--selo);
}

.mk-aviso {
  --mk-glifo: "!";
  --mk-tinta: var(--ambar);
  color: var(--ambar);
  background: var(--ambar-bg);
  border-color: var(--ambar);
  border-style: dashed;
}

.mk-vencido {
  --mk-glifo: "\2715";
  --mk-tinta: var(--carimbo);
  color: var(--carimbo);
  background-color: var(--carimbo-bg);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 34%, transparent) 0 2px, transparent 2px 6px);
  border-color: var(--carimbo);
  border-width: 1.5px;
}

.mk-mais {
  --mk-glifo: "+";
  --mk-tinta: var(--tinta-3);
  color: var(--tinta-3);
  background: var(--papel-2);
  border-color: var(--regua-2);
  border-style: dotted;
}

.legenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   8. CAPA DE DOSSIÊ — retrato, carimbo circular e emissão rápida
   ------------------------------------------------------------ */
.employee-detail-head.capa {
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: var(--regua-dupla);
}

.retrato {
  display: grid;
  flex: none;
  place-items: center;
  width: 82px;
  height: 96px;
  color: var(--tinta-2);
  font-family: var(--serif);
  font-size: var(--fs-num);
  font-weight: 700;
  background: var(--papel-2);
  border: 1px solid var(--tinta);
  box-shadow:
    inset 0 0 0 3px var(--papel),
    inset 0 0 0 4px var(--regua);
}

/* Com retrato, a moldura da capa deixa de mostrar iniciais e passa a mostrar a
   pessoa. A moldura é a mesma — a borda dupla de foto colada em documento. */
.retrato.tem-foto {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  padding: 3px;
  background: var(--papel);
}

/* Bloco, não item de grade: numa grade a altura 100% não tinha referência e a
   foto saía da moldura com o tamanho original. */
.retrato.tem-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.employee-detail-title {
  flex: 1;
  min-width: 240px;
}

.employee-detail-title h3 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
}

.employee-detail-title p {
  font-size: var(--fs-sm);
}

.employee-detail-title p.mono {
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

.employee-detail-badges {
  margin-top: 10px;
}

.carimbo-redondo {
  display: grid;
  flex: none;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: 8px;
  color: var(--selo);
  text-align: center;
  border: 2px solid var(--selo);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--papel),
    inset 0 0 0 4.5px var(--selo);
  transform: rotate(-8deg);
}

.carimbo-redondo .t1 {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.carimbo-redondo .t2 {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-rubrica);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.carimbo-redondo .t3 {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

.carimbo-redondo.cr-aviso {
  color: var(--ambar);
  border-color: var(--ambar);
  border-style: dashed;
  box-shadow:
    inset 0 0 0 3px var(--papel),
    inset 0 0 0 4.5px var(--ambar);
}

.carimbo-redondo.cr-vencido {
  color: var(--carimbo);
  border-color: var(--carimbo);
  box-shadow:
    inset 0 0 0 3px var(--papel),
    inset 0 0 0 4.5px var(--carimbo);
}

.emissao-rapida {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.emissao-acoes {
  display: grid;
  gap: 6px;
}

.emissao-acoes .secondary-button {
  justify-content: flex-start;
  width: 100%;
  min-height: var(--toque);
  background: var(--papel);
}

/* ------------------------------------------------------------
   9. TABELAS EM LIVRO-RAZÃO — réguas finas, cabeçalho em versalete
   ------------------------------------------------------------ */
.table-wrap {
  border: 0;
  border-radius: 0;
}

table {
  min-width: 720px;
}

th {
  padding: 7px 10px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  background: var(--papel-2);
  border-top: 1.5px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}

td {
  padding: 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--regua);
}

tbody tr:nth-child(even) td {
  background: rgba(25, 22, 18, 0.016);
}

tbody tr:hover td {
  background: var(--oficial-bg);
}

tbody tr:last-child td {
  border-bottom: 1.5px solid var(--tinta);
}

.cell-main strong {
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.cell-main span {
  font-size: var(--fs-rubrica);
}

.table-action {
  min-height: 32px;
  color: var(--tinta-2);
  border-color: var(--regua-2);
}

.table-action:hover {
  transform: none;
  color: var(--oficial);
  border-color: var(--oficial);
  box-shadow: none;
}

/* ------------------------------------------------------------
   10. ABAS EM SEPARADOR DE PASTA
   ------------------------------------------------------------ */
.training-tabs {
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--tinta);
  border-radius: 0;
  scrollbar-width: none;
}

.training-tabs::-webkit-scrollbar {
  display: none;
}

.training-tab {
  flex: 0 1 auto;
  min-height: var(--toque);
  margin-bottom: -1.5px;
  padding: 8px 14px;
  color: var(--tinta-3);
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 400;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: var(--r) var(--r) 0 0;
}

.training-tab:hover {
  color: var(--tinta);
  background: var(--papel-2);
}

.training-tab.active {
  color: var(--tinta);
  font-weight: 700;
  background: var(--papel);
  border-color: var(--regua-2);
  border-bottom-color: var(--tinta);
  box-shadow: none;
}

.training-tab svg {
  width: 16px;
  height: 16px;
  color: var(--tinta-3);
}

.training-tab.active svg {
  color: var(--oficial);
}

/* ------------------------------------------------------------
   11. NOTAS CONTEXTUAIS EM PAPEL COLORIDO
   ------------------------------------------------------------ */
.guided-hint,
.admin-note,
.backup-action-hint {
  padding: 10px 12px;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  background: var(--oficial-bg);
  border: 0;
  border-left: 3px solid var(--oficial);
  border-radius: 0 var(--r) var(--r) 0;
}

.guided-hint strong,
.admin-note strong {
  color: var(--oficial);
}

.alert-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
  background: var(--papel);
  border: 1px solid var(--regua);
  border-left: 3px solid var(--oficial);
  border-radius: 0 var(--r) var(--r) 0;
}

.alert-row::before {
  display: none;
}

.alert-row:hover {
  transform: none;
  box-shadow: var(--sombra-baixa);
}

.alert-row[data-severity="warn"] {
  background: var(--ambar-bg);
  border-left-color: var(--ambar);
}

.alert-row[data-severity="danger"] {
  background: var(--carimbo-bg);
  border-left-color: var(--carimbo);
}

.alert-row strong {
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.alert-date {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

/* A linha da fila é o caminho para a correção: um botão invisível cobre a
   linha inteira, e "Editar o EPI →" diz para onde o clique leva. */
.alert-row-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}

.alert-row-link:focus-visible {
  outline: 2px solid var(--marca-acao);
  outline-offset: 2px;
}

.alert-abrir {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--oficial);
  font-family: var(--sans);
  font-weight: 700;
}

.alert-abrir svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-2) var(--ease);
}

.alert-row:hover .alert-abrir,
.alert-row:has(.alert-row-link:focus-visible) .alert-abrir {
  text-decoration: underline;
}

.alert-row:hover .alert-abrir svg {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   12. CAIXA DE ASSINATURA
   ------------------------------------------------------------ */
.signature-box {
  gap: 8px;
  padding: 12px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.signature-box > span {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.manual-line,
.signature-line {
  border-top: 0;
  border-bottom: 1px solid var(--tinta);
}

.signature-line {
  padding-top: 38px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  border-bottom: 0;
  border-top: 1px solid var(--tinta);
}

.digital-trail li {
  border-bottom: 1px dotted var(--regua);
}

.digital-trail span,
.digital-trail small {
  font-family: var(--mono);
}

/* ------------------------------------------------------------
   13. ESTADO VAZIO COM PASSOS NUMERADOS
   ------------------------------------------------------------ */
.empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 22px;
  color: var(--tinta-3);
  text-align: center;
  background-color: var(--papel);
  background-image: repeating-linear-gradient(135deg, rgba(25, 22, 18, 0.022) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--regua-2);
  border-radius: var(--r);
}

.empty-titulo {
  max-width: 56ch;
  margin: 0;
  color: var(--tinta-2);
  font-family: var(--serif);
  font-size: var(--fs-lg);
}

.empty-passos {
  display: grid;
  gap: 6px;
  max-width: 60ch;
  margin: 0;
  padding: 0;
  counter-reset: passo;
  list-style: none;
  text-align: left;
}

.empty-passos li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding-bottom: 6px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--regua);
}

.empty-passos li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.empty-passos li::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--tinta-2);
  counter-increment: passo;
  content: counter(passo);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-radius: 1px;
}

/* ------------------------------------------------------------
   14. TOAST E DIÁLOGO — bilhete de papel selado
   ------------------------------------------------------------ */
.toast {
  padding: 12px 14px;
  color: var(--tinta);
  font-size: var(--fs-sm);
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-left: 4px solid var(--oficial);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--sombra-alta);
  backdrop-filter: none;
}

/* Lançamento de troca ou devolução: a folha de ocorrência por cima da tela
   aberta. Fora dela nada muda — cancelar devolve a página exatamente como
   estava. */
.evento-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(25, 22, 18, 0.42);
}

.evento-caixa {
  width: min(720px, 100%);
  margin: auto;
  box-shadow: var(--sombra-alta);
}

.evento-caixa .panel-body {
  display: grid;
  gap: 14px;
}

.evento-caixa #epiEventForm {
  display: grid;
  gap: 14px;
}

@media print {
  .evento-overlay {
    display: none;
  }
}

/* ------------------------------------------------------------
   15. FOLHA A4 — a ficha impressa e o pacote de auditoria
   ------------------------------------------------------------ */
.print-sheet,
.audit-ficha-sheet {
  background: var(--papel);
}

.sheet-header {
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-bottom: 2px solid var(--tinta);
  border-radius: var(--r) var(--r) 0 0;
}

.sheet-header h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
}

.sheet-header p {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

.audit-ficha-sheet {
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.audit-ficha-top {
  border-bottom: 2px solid var(--tinta);
}

.audit-ficha-top h3 {
  font-family: var(--serif);
}

.legal-meta {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

@media (max-width: 1200px) {
  .training-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-layout,
  .training-layout.compact {
    grid-template-columns: 1fr;
  }

  .training-form-panel {
    position: static;
  }
  .stats-grid,
  .summary-strip,
  .account-grid,
  .saas-metrics,
  .saas-usage-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-grid,
  .charts-grid,
  .flow-panel-body,
  .guided-layout,
  .onboarding-hero,
  .epi-command,
  .ficha-command,
  .epi-catalog-layout,
  .audit-hero,
  .audit-section-grid,
  .saas-admin-grid,
  .saas-admin-grid.lower,
  .saas-backup-layout,
  .tenant-detail-bottom,
  .detail-grid,
  .backup-client-list {
    grid-template-columns: 1fr;
  }

  .view-grid.employee-detail-open {
    grid-template-columns: 1fr;
  }

  .backup-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-client-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .backup-client-meta {
    justify-items: start;
    text-align: left;
    gap: 8px;
  }

  .backup-client-actions {
    width: 100%;
  }

  .cadastro-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .saas-command-actions {
    justify-content: flex-start;
  }

  .field.compact {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  body {
    background: var(--bg);
  }

  .content {
    padding: 18px 12px 30px;
  }

  .topbar {
    padding: 16px 12px;
  }

  .stats-grid,
  .summary-strip,
  .account-grid,
  .backup-metrics,
  .backup-client-list,
  .epi-metric-grid,
  .ficha-metric-grid,
  .audit-metrics,
  .checklist-grid,
  .signature-dual,
  .cadastro-flow,
  .form-grid,
  .form-grid.three,
  .training-metric-grid {
    grid-template-columns: 1fr;
  }

  .risk-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-special-row {
    grid-template-columns: 1fr;
  }

  .guided-actions {
    justify-content: stretch;
  }

  .guided-actions .primary-button,
  .guided-actions .secondary-button {
    width: 100%;
  }

  .panel-header,
  .toolbar,
  .sheet-header,
  .audit-block-header,
  .audit-print-intro,
  .audit-ficha-top,
  .ficha-generator-row,
  .epi-command,
  .ficha-command,
  .training-command {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .training-command .secondary-button {
    width: 100%;
  }

  .training-tab {
    flex-basis: 168px;
  }

  .detail-grid.employee-data-grid {
    grid-template-columns: 1fr;
  }

  .employee-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-tab-actions .secondary-button {
    width: 100%;
  }

  .alert-row {
    grid-template-columns: 7px minmax(0, 1fr);
  }

  .alert-date {
    grid-column: 2;
    justify-items: start;
  }

  .signature-line {
    min-width: 0;
  }

  .login-screen {
    padding: 0;
    min-height: 100dvh;
    background-color: var(--papel-2);
    position: fixed;
    inset: 0;
  }

  .login-bg-layer {
    object-position: center 20%;
    width: 100vw;
    height: 100dvh;
    min-width: 100vw;
    min-height: 100dvh;
  }

  .login-content {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  .login-content-right {
    justify-items: stretch;
    padding-right: 0;
  }

  .login-content-right .login-panel.single {
    justify-self: stretch;
  }

  .login-stack {
    grid-template-columns: 1fr;
  }

  .login-stack > .login-panel:first-child,
  .login-stack > .login-panel:nth-child(2),
  .login-stack > .login-panel:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }

  .login-brand {
    display: none;
  }

  .login-panel {
    margin: 24px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media print {
  /* Selos, réguas e hachuras precisam sair no papel: sem isto o
     navegador descarta os fundos e o documento perde o estado. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #ffffff;
    background-image: none;
  }

  .sidebar,
  .topbar,
  .no-print,
  .toast,
  .view > :not(.print-area) {
    display: none !important;
  }

  .app-shell,
  .workspace,
  .content {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--papel);
  }

  .panel,
  .stat-card {
    box-shadow: none;
  }

  .print-area {
    display: block !important;
  }

  .audit-hero,
  .summary-strip,
  .table-wrap {
    box-shadow: none !important;
  }

  .audit-section-grid,
  .audit-print-intro {
    display: none !important;
  }

  .audit-print-pack {
    display: block;
    margin-top: 0;
  }

  .audit-ficha-sheet {
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .audit-ficha-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .audit-ficha-records,
  .audit-ficha-records table,
  .audit-table table {
    min-width: 0;
  }

  .signature-dual {
    grid-template-columns: repeat(3, 1fr);
    gap: 8mm;
  }

  /* A folha e um documento, nao uma tela: nada de comando sai no papel e a
     tabela de entregas se ajusta a largura util do A4. */
  .audit-ficha-sheet .table-action,
  .audit-ficha-sheet .row-actions,
  .audit-ficha-sheet button,
  .audit-ficha-sheet [data-action],
  .print-area .no-print {
    display: none !important;
  }

  .audit-ficha-sheet .table-wrap {
    overflow: visible;
  }

  .audit-ficha-sheet table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 9pt;
    border-collapse: collapse;
  }

  .audit-ficha-sheet th,
  .audit-ficha-sheet td {
    padding: 2mm 1.5mm;
    line-height: 1.25;
    word-break: break-word;
    vertical-align: top;
  }

  .audit-ficha-sheet .digital-trail {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 8pt;
  }

  .audit-ficha-sheet .digital-trail li {
    margin: 0 0 1.5mm;
    line-height: 1.25;
  }

  .audit-ficha-sheet .digital-trail small {
    display: block;
    font-size: 7.5pt;
  }

  .audit-ficha-sheet .signature-box .manual-line {
    margin-top: 10mm;
  }
}

/* Conta da empresa: verificacao em duas etapas (TOTP) */
.two-factor-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.two-factor-qr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.two-factor-qr {
  width: 200px;
  height: 200px;
  padding: 8px;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.two-factor-qr svg {
  width: 100%;
  height: 100%;
}

.two-factor-secret {
  flex: 1;
  min-width: 220px;
  display: grid;
  gap: 6px;
}

.two-factor-secret span {
  font-size: var(--fs-rubrica);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.two-factor-secret code,
.recovery-codes code {
  font-family: var(--mono);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  word-break: break-all;
}

.recovery-codes {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.recovery-codes code {
  display: block;
  text-align: center;
  border-style: dashed;
  border-color: var(--line-strong);
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--primary-strong);
}

.two-factor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.two-factor-login .muted-text {
  margin: 0 0 12px;
}

/* Importacao/exportacao de planilhas */
.import-actions {
  align-items: flex-end;
  gap: 8px;
}

.import-preview .import-summary {
  align-items: center;
}

.import-preview .import-summary .check-field {
  margin: 0;
}

.import-messages {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  font-size: var(--fs-rubrica);
  color: var(--muted);
}

.import-messages .danger-text {
  color: var(--red);
}

.import-row-error td {
  background: var(--red-soft);
}

@media print {
  .import-actions,
  .import-preview {
    display: none;
  }
}


/* ============================================================
   PASSO 3 — AS TELAS
   Estrutura do protótipo design/documento/prototipo.html aplicada
   às nove telas reais e ao login. Nenhuma classe muda de nome.
   ============================================================ */

.timbre-id h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: 0.005em;
}

.timbre-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 3px 0 0;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.5;
}

.timbre-dados:empty {
  display: none;
}

.timbre-dados span {
  white-space: nowrap;
}

.timbre-dados b {
  color: var(--tinta-2);
  font-weight: 600;
}

.timbre-dados .mono {
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  letter-spacing: -0.01em;
}

.timbre-razao {
  overflow: hidden;
  max-width: 40ch;
  color: var(--tinta-2);
  font-weight: 600;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   3.2 RODAPÉ DO ÍNDICE — o resumo do arquivo
   ------------------------------------------------------------ */
/* A legenda da marca cabe na largura do índice sem ser cortada. */
.brand span {
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: normal;
}

.arquivo-resumo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.45;
}

.arquivo-resumo:empty {
  display: none;
}

.arquivo-resumo b {
  overflow: hidden;
  color: var(--tinta-2);
  font-family: var(--serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.arquivo-resumo .mono {
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------
   3.3 CABEÇALHO DE SEÇÃO — o "command" vira abertura de documento
   ------------------------------------------------------------ */
.epi-command,
.ficha-command,
.audit-hero {
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px 18px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
  box-shadow: var(--sombra-folha);
}

.epi-command > div:first-child,
.ficha-command > div:first-child,
.audit-hero > div:first-child {
  min-width: 0;
  max-width: 74ch;
}

.epi-command .eyebrow,
.ficha-command .eyebrow,
.audit-hero .eyebrow {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 6px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--regua);
}

.epi-command h2,
.ficha-command h2,
.audit-hero h2,
.audit-hero h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.epi-command p,
.ficha-command p,
.audit-hero p {
  max-width: 68ch;
  margin: 5px 0 0;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
}

.epi-command .row-actions,
.ficha-command .row-actions,
.audit-hero .row-actions {
  flex: none;
  margin-left: auto;
}

/* ------------------------------------------------------------
   3.4 INDICADORES — todas as telas usam a mesma ficha de índice
   ------------------------------------------------------------ */
.epi-metric-card,
.ficha-metric-card,
.training-metric,
.audit-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 96px;
  text-align: left;
  padding: 12px 13px 13px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r);
  box-shadow: var(--sombra-folha);
}

.epi-metric-card:hover,
.ficha-metric-card:hover,
.training-metric:hover,
.audit-metrics > div:hover {
  transform: none;
  border-color: var(--regua-2);
  box-shadow: var(--sombra-alta);
}

.epi-metric-card span,
.ficha-metric-card span,
.training-metric span,
.audit-metrics > div span {
  order: 1;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.epi-metric-card strong,
.ficha-metric-card strong,
.training-metric strong,
.audit-metrics > div strong {
  order: 2;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.epi-metric-card small,
.ficha-metric-card small,
.training-metric small,
.audit-metrics > div small {
  order: 3;
  margin-top: auto;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  letter-spacing: 0;
  text-transform: none;
}

.epi-metric-card svg,
.ficha-metric-card svg {
  order: 0;
  align-self: flex-start;
  width: 15px;
  height: 15px;
  margin-bottom: 2px;
  color: var(--tinta-3);
  background: transparent;
  border: 0;
}

.epi-metric-card.danger {
  border-top-color: var(--carimbo);
}

.epi-metric-card.danger strong {
  color: var(--carimbo);
}

/* ------------------------------------------------------------
   3.5 ÍNDICE DE CONFORMIDADE — régua de conferência no painel
   ------------------------------------------------------------ */
.stat-card .ticks {
  display: flex;
  gap: 2px;
  margin: 8px 0 4px;
}

.stat-card .ticks i {
  display: block;
  flex: 1;
  height: 12px;
  background: var(--papel-3);
  border: 1px solid var(--regua);
}

.stat-card .ticks i.on {
  background: var(--oficial);
  border-color: var(--oficial);
}

.stat-card .ticks i.falha {
  background-color: var(--carimbo-bg);
  background-image: repeating-linear-gradient(45deg, var(--carimbo) 0 1px, transparent 1px 3px);
  border-color: var(--carimbo);
}

.stat-card .stat-value {
  margin-bottom: 0;
}

.stat-unidade {
  color: var(--tinta-3);
  font-size: 0.45em;
  font-weight: 400;
}

.stat-card .ticks + .stat-detail {
  margin-top: 0;
}

/* ------------------------------------------------------------
   3.5b FICHA DE ÍNDICE — um só desenho para todos os indicadores
   (painel, dossiê, EPIs, fichas, treinamentos, auditoria e conta):
   filete de tinta no topo, valor em serifada e rubrica em versalete.
   ------------------------------------------------------------ */
.stat-card,
.summary-item,
.account-metric,
.epi-metric-card,
.ficha-metric-card,
.training-metric,
.audit-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r);
  box-shadow: var(--sombra-folha);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.stat-card:hover,
.summary-item:hover,
.account-metric:hover,
.epi-metric-card:hover,
.ficha-metric-card:hover,
.training-metric:hover,
.audit-metrics > div:hover {
  transform: none;
  border-color: var(--regua-2);
  box-shadow: var(--sombra-alta);
}

.summary-item span,
.account-metric span,
.epi-metric-card span,
.ficha-metric-card span,
.training-metric span,
.audit-metrics > div span,
.stat-card .stat-label {
  order: 1;
  margin: 0;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.summary-item strong,
.account-metric strong,
.epi-metric-card strong,
.ficha-metric-card strong,
.training-metric strong,
.audit-metrics > div strong,
.stat-card .stat-value {
  order: 2;
  display: block;
  margin: 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-carimbo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
}

.summary-item small,
.account-metric small,
.epi-metric-card small,
.ficha-metric-card small,
.training-metric small,
.audit-metrics > div small,
.stat-card .stat-detail {
  order: 3;
  margin: 0;
  margin-top: auto;
  padding-top: 4px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  letter-spacing: 0;
  text-transform: none;
}

/* A régua de ticks vem entre o valor e a legenda, como no protótipo, e ocupa
   a largura do cartão — não a largura do próprio conteúdo. */
.stat-card .ticks {
  order: 3;
  align-self: stretch;
  width: 100%;
  margin-top: 6px;
}

.stat-card .stat-detail {
  order: 4;
}

/* ------------------------------------------------------------
   3.6 TABELAS DAS TELAS — livro-razão que rola em vez de espremer
   ------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table td,
.table-wrap table th {
  white-space: nowrap;
}

.table-wrap .cell-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.table-wrap .cell-main strong {
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.table-wrap .cell-main span {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

.table-wrap .cell-main .mono,
.table-wrap td .mono {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.table-wrap tbody tr:last-child td {
  border-bottom: 1.5px solid var(--tinta);
}

/* ------------------------------------------------------------
   3.7 DOSSIÊ DO COLABORADOR — ocupa a folha inteira
   ------------------------------------------------------------ */
.view-grid.employee-detail-open {
  display: block;
}

/* Com o dossiê aberto, o formulário de cadastro sai da frente. Alvo pelo que
   o painel é, não pela posição: a lista passou a vir antes do cadastro. */
.view-grid.employee-detail-open > .panel:not(.employee-detail-panel) {
  display: none;
}

/* ...menos quando se está EDITANDO o colaborador do dossiê aberto. Sem esta
   exceção, clicar em "Editar" na ficha cadastral preenchia um formulário
   display:none e a tela não mexia um pixel — parecia botão quebrado. */
.view-grid.employee-detail-open.employee-editing > .panel.employee-form-panel {
  display: block;
  margin-top: var(--s5);
  border-color: var(--marca-azul);
  box-shadow: var(--sombra-alta);
}

/* Identificação em campos pautados, como a primeira seção de um
   formulário oficial: rubrica em versalete sobre um filete de tinta.
   Vale para a capa do dossiê e para os dados da conta. */
.detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 24px;
}

.detail-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 0 5px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--regua);
  border-radius: 0;
}

.detail-block:hover {
  transform: none;
  background: none;
  border-color: var(--tinta-4);
  box-shadow: none;
}

.detail-block > span {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-block > strong {
  min-width: 0;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* Razão social e e-mail são texto corrido, não número de registro. */
.detail-block.detail-wide {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------
   3.8 PASTA DE AUDITORIA — abertura e indicadores do relatório
   ------------------------------------------------------------ */
.audit-hero {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  margin-bottom: 16px;
}

.audit-hero h3 {
  margin: 0;
}

.audit-metrics {
  gap: 12px 14px;
}

.audit-metrics > div {
  min-height: 78px;
  gap: 4px;
}

/* ------------------------------------------------------------
   3.9 LINHA DO TEMPO — a marca é uma etiqueta, não um parágrafo
   ------------------------------------------------------------ */
/* A coluna do mês manda na largura: a etiqueta encolhe com ela em vez de
   empurrar a linha do tempo para fora da folha. */
.lt-mes {
  flex: 1 1 78px;
  min-width: 0;
  max-width: 150px;
}

.lt-marcas {
  min-width: 0;
}

.lt-mes .mk {
  overflow: hidden;
  max-width: 100%;
}

.lt-mes .mk b {
  display: -webkit-box;
  overflow: hidden;
  font-weight: inherit;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.lt-mes .mk small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   3.10 LIVRO-RAZÃO — a lista fica com a folha; o texto secundário
   trunca em vez de empurrar a tabela para fora da página
   ------------------------------------------------------------ */
.view-grid {
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr);
}

.table-wrap .cell-main {
  max-width: 30ch;
}

.table-wrap .cell-main strong,
.table-wrap .cell-main span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   3.11 INDICADOR DE TREINAMENTOS — mesmo ícone discreto das demais
   ------------------------------------------------------------ */
.training-metric > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* A ficha de índice não usa ícone: o número é que fala. */
.training-metric-icon {
  display: none;
}

.training-metric > div > span {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.training-metric > div > strong {
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   3.12 EMISSÃO RÁPIDA — três providências lado a lado, como os
   carimbos de despacho no pé da capa do dossiê
   ------------------------------------------------------------ */
.emissao-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.emissao-acoes .secondary-button {
  justify-content: flex-start;
  width: 100%;
}

/* ------------------------------------------------------------
   3.13 ALERTA — o selo não pode invadir o texto da linha
   ------------------------------------------------------------ */
.alert-row {
  align-items: flex-start;
  gap: 12px;
}

.alert-row .badge {
  flex: none;
  align-self: flex-start;
}

.alert-meta {
  flex: none;
  align-items: flex-end;
  text-align: right;
}

/* ------------------------------------------------------------
   3.14 ACESSO — a portaria do arquivo
   O fundo continua sendo a foto da marca, mas o que se lê passa a
   ser papel opaco: vidro a 20% sobre foto não tem contraste.
   ------------------------------------------------------------ */
.login-panel,
.login-content-right .login-home-panel {
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
  backdrop-filter: none;
}

.login-panel-header {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tinta);
}

.login-panel-header h2 {
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.005em;
}

.login-panel-header p {
  color: var(--tinta-3);
}

/* Cada opção é uma linha do índice de acesso: régua fina entre elas. */
.login-choice,
.login-home-panel > button,
.login-home-panel > a {
  color: var(--tinta);
  background: transparent;
  border-radius: 0;
}

.login-choice strong,
.login-choice h3 {
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 700;
}

.login-choice span,
.login-choice p {
  color: var(--tinta-3);
}

.login-brand h1 {
  color: var(--tinta);
  font-family: var(--serif);
}

.trial-box {
  background: var(--selo-bg);
  border: 1px solid var(--selo);
  border-radius: var(--r);
}

.trial-box strong {
  color: var(--tinta);
  font-family: var(--serif);
}


/* ============================================================
   PASSO 2 — RESPONSIVO E IMPRESSAO DOS COMPONENTES NOVOS
   No celular o indice vira gaveta horizontal de fichas e a
   marginalia desce para cima do item.
   ============================================================ */

@media (max-width: 640px) {
  .lt {
    min-width: 720px;
  }

  .doc-lista li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .doc-marg {
    padding: 0 0 0 8px;
    text-align: left;
    border-right: 0;
    border-left: 2px solid var(--regua);
  }

  .employee-detail-head.capa {
    align-items: flex-start;
  }

  .carimbo-redondo {
    transform: rotate(-4deg);
  }

  .alert-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-date {
    grid-column: 1;
  }

  .stat-value {
    font-size: var(--fs-num);
  }

  .employee-detail > .aba-folha {
    margin: -18px -18px 0;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm 15mm;
  }

  .indice-titulo,
  .emissao-rapida,
  .training-tabs,
  .aba-folha {
    display: none !important;
  }

  /* Imprimir dossie: a capa do colaborador vira a folha A4 da vez. */
  .view > .view-grid.employee-detail-open {
    display: block !important;
  }

  .view-grid.employee-detail-open > .panel:not(.employee-detail-panel) {
    display: none !important;
  }

  /* Mesmo resgate para a ficha: a .print-area da tela VI mora dentro de
     uma .view-grid, e `.view > :not(.print-area)` escondia a mae inteira,
     o que fazia "Imprimir" da ficha sair em branco. */
  .view > .view-grid:has(> .print-area) {
    display: block !important;
  }

  .view-grid:has(> .print-area) > .panel:not(.print-area) {
    display: none !important;
  }

  .employee-detail-panel {
    display: block !important;
    border: 0;
    box-shadow: none;
  }

  .employee-detail-panel .panel-header .secondary-button,
  .employee-tab-actions {
    display: none !important;
  }

  .lt-wrap {
    overflow: visible;
  }

  .lt {
    min-width: 0;
  }

  .doc-lista li,
  .empty-passos li,
  .signature-box,
  .carimbo-redondo {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-sheet,
  .audit-ficha-sheet,
  .legal-print-box,
  .sheet-header {
    background: #ffffff;
    box-shadow: none;
  }
}


/* ============================================================
   PASSO 3 — RESPONSIVO E IMPRESSAO DAS TELAS
   No celular o timbre e a régua de comandos empilham em coluna
   inteira, e a folha impressa não leva a régua de serviço.
   ============================================================ */

/* A folha estreita continua de uma coluna só: as larguras novas do
   livro-razão e da pasta de auditoria valem apenas na folha larga. */
@media (max-width: 1200px) {
  .view-grid,
  .audit-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* Dois indicadores por linha, como no protótipo. */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* No celular a etiqueta do mês pode ocupar a coluna inteira. */
  .lt-mes {
    max-width: none;
  }

  /* A lista vira ficha por prioridade: sem coluna estreita ao lado. */
  .table-wrap .cell-main {
    max-width: none;
  }

  .emissao-acoes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .topbar-actions,
  .emissao-rapida {
    display: none !important;
  }

  .topbar {
    padding-bottom: 8px;
  }

  /* Papel de verdade é branco: o tom do arquivo é da tela, não da folha. */
  html,
  body,
  .app-shell,
  .workspace,
  .content,
  .view,
  .panel,
  .panel-header,
  .panel-body,
  .employee-detail,
  .employee-detail-head,
  .summary-item,
  .detail-block {
    background: #ffffff;
  }

  /* Sem cor, o campo pautado ainda tem rubrica e filete. */
  .detail-block {
    border-bottom-color: #000000;
  }

  .detail-block > span,
  .summary-item span {
    color: #000000;
  }
}

/* Rodapé do calendário: estoque e kit ficam sempre visíveis, fora do card de
   assinatura (que deve falar só de assinatura). */
.painel-rodape {
  margin: 14px 0 0;
  padding-top: 10px;
  color: var(--tinta-3);
  border-top: 1px solid var(--regua);
}

/* ------------------------------------------------------------
   COLABORADORES — livro-razão em largura inteira
   O cadastro deixa de ocupar uma coluna permanente: ele vem abaixo da
   lista, para que a coluna de ações (e o "›" do dossiê) fique sempre
   dentro do campo de visão.
   ------------------------------------------------------------ */
.view-grid.colaboradores-grid,
.view-grid.colaboradores-grid.employee-detail-open {
  grid-template-columns: minmax(0, 1fr);
}

/* O nome do colaborador é o alvo principal: abre o dossiê sem depender
   da barra de rolagem interna da tabela. */
.link-button {
  padding: 0;
  color: var(--oficial);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* Dentro do livro-razão o nome é serifa limpa: seis sublinhados empilhados
   quebram a leitura da tabela impressa. O chevron da direita é que diz que a
   linha abre. */
.table-wrap .link-button strong {
  font-family: var(--serif);
  font-size: 1.02em;
}

/* Chevron único no fim da linha, no lugar da fileira de ícones. */
.table-action.chevron-acao {
  border-color: transparent;
  background: none;
  color: var(--tinta-3);
}

.table-action.chevron-acao:hover,
.table-action.chevron-acao:focus-visible {
  border-color: var(--regua-2);
  color: var(--tinta);
}

.link-button strong {
  font-weight: 700;
}

/* Coluna de ações presa à direita: nunca sai do campo de visão. */
.table-wrap th.col-acoes,
.table-wrap td.col-acoes {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--papel);
  box-shadow: -1px 0 0 var(--regua);
}

.table-wrap tbody tr:nth-child(even) td.col-acoes {
  background: var(--papel-2);
}

.table-wrap thead th.col-acoes {
  background: var(--papel-2);
}

/* Pista de arraste acima das tabelas que rolam, como no protótipo. */
.dica-arraste {
  display: none;
  margin: 0 0 8px;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------
   CELULAR — alvo de toque, pista de arraste e ordem da gaveta
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Piso de 44px do design system nos controles que o dedo alcança. */
  .field input,
  .field select,
  .field textarea,
  .field.compact input,
  .field.compact select,
  .primary-button,
  .secondary-button,
  .danger-button,
  .icon-button,
  .table-action {
    min-height: var(--toque);
  }

  .icon-button,
  .table-action {
    min-width: var(--toque);
  }

  .icon-button {
    width: var(--toque);
    height: var(--toque);
  }

  /* Tabela que rola na horizontal avisa que rola. */
  .dica-arraste {
    display: block;
  }

}

/* ------------------------------------------------------------
   DOSSIÊ — capa pautada, documentos exigíveis e abas de pasta
   ------------------------------------------------------------ */
.capa-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
}

.doc-exigiveis {
  display: grid;
  gap: 8px;
}

/* Marginália + corpo + selo + caminho, como no protótipo. */
.doc-lista-dossie li {
  grid-template-columns: 118px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.doc-lista-dossie .doc-corpo {
  display: grid;
  gap: 2px;
}

.doc-lista-dossie .doc-corpo strong {
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.doc-lista-dossie .doc-corpo small {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

.doc-selo,
.doc-acao {
  display: flex;
  align-items: center;
}

/* Nota de pendência em tom carimbo. */
.legal-box-pendencia {
  margin: 0;
  color: var(--carimbo);
  background: var(--carimbo-bg);
  border-color: var(--carimbo);
}

/* Aba de pasta com o contador do protótipo; o ícone sai, como no índice. */
.training-tabs .training-tab svg {
  display: none;
}

.aba-contador {
  margin-left: 8px;
  padding: 0 5px;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
  background: var(--papel-3);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.training-tab.active .aba-contador {
  color: var(--tinta);
  border-color: var(--tinta-3);
}

/* A marginália não sobrevive em coluna estreita: quando o CONTÊINER encolhe,
   a referência da norma vai para cima do corpo em vez de virar uma segunda
   coluna de texto. */
.panel-body,
.doc-exigiveis,
.legal-box {
  container-type: inline-size;
}

@container (max-width: 460px) {
  .doc-lista li,
  .doc-lista-dossie li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .doc-marg {
    padding-right: 0;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--regua);
  }
}

@media (max-width: 900px) {
  .capa-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-lista-dossie li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ------------------------------------------------------------
   CONTROLE DE DOCUMENTOS DO COLABORADOR
   O checklist da aba Documentos: placar no topo, uma linha por
   documento exigível, selo com SÍMBOLO e palavra, e a ação com
   verbo em vez da seta que obrigava a adivinhar o destino.
   ------------------------------------------------------------ */

/* Placar do checklist: o número grande é o mesmo do carimbo da capa. */
.doc-placar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 8px 12px;
  background: var(--papel-3);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.doc-placar-marca {
  color: var(--tinta);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.doc-placar-texto {
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
}

/* O selo é o .badge do sistema, que já traz símbolo e palavra. Aqui só a data
   do documento entra embaixo dele, alinhada à esquerda. */
.doc-lista-checklist .doc-selo {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.doc-data {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

/* O que está fora do sistema não leva tinta de alerta: a linha não acusa
   ninguém, só declara o que este arquivo não controla. */
.doc-linha-externo {
  background: var(--papel-2);
}

/* "Controle externo" não é botão: é a declaração de que não há o que clicar.
   Sem quebra de linha ela vazava da coluna de ações a 1280 px. */
.doc-acao-fora {
  display: block;
  width: 100%;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-style: italic;
  text-align: center;
}

/* CADA <li> É UM GRID SEU: com coluna elástica, o selo de "Assinada" e o de
   "Válida até 03/09/2028" caíam em posições diferentes e a lista deixava de
   parecer uma lista. Por isso as duas últimas colunas têm largura FIXA — é o
   que alinha os selos e os botões de uma linha para a outra. */
.doc-lista-checklist li {
  grid-template-columns: 110px minmax(0, 1fr) 168px 172px;
  align-items: start;
}

.doc-lista-checklist .doc-acao {
  justify-content: flex-end;
}

.doc-lista-checklist .doc-acao-botao {
  width: 100%;
  justify-content: center;
}

/* Resumo na capa: a frase de um lado, o caminho para a aba do outro. */
.doc-resumo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.doc-resumo-texto {
  flex: 1 1 320px;
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
}

.dossie-selo-fora {
  color: var(--tinta-3);
}

/* Entre 640 e 900 px a coluna do texto ficava com menos espaço que a do
   botão: as duas colunas fixas encolhem antes de a linha empilhar. */
@container (max-width: 900px) {
  .doc-lista-checklist li {
    grid-template-columns: 96px minmax(0, 1fr) 150px 150px;
    gap: 10px;
  }
}

@container (max-width: 640px) {
  .doc-lista-checklist li {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-lista-checklist .doc-acao {
    justify-content: stretch;
  }
}

/* ------------------------------------------------------------
   TELA VI — a ficha é a folha A4, com régua de emissão acima
   ------------------------------------------------------------ */
.ficha-emissao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--tinta);
}

.ficha-protocolo {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  letter-spacing: 0.06em;
}

.ficha-emissao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Cobertura do kit: estado do sistema, fica na régua de emissão e não vai
   para o papel. */
.ficha-emissao-kit {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

/* Seção 2 da folha: os campos do empregado à esquerda, o retrato à direita —
   o lugar onde a foto vai em documento de identificação. Sem retrato cadastrado
   não se imprime moldura vazia: folha assinada com buraco em branco parece
   documento pela metade. */
.ficha-empregado {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ficha-empregado > .ficha-identificacao {
  flex: 1 1 auto;
  min-width: 0;
}

.ficha-retrato {
  display: grid;
  flex: none;
  gap: 2px;
  justify-items: center;
  margin: 0;
}

.ficha-retrato img {
  width: 24mm;
  height: 32mm;
  object-fit: cover;
  background: var(--papel);
  border: 1px solid var(--tinta);
}

.ficha-retrato figcaption {
  color: var(--tinta-3);
}

/* Seção 1 da folha: campos rotulados sobre linha pautada, como um formulário
   oficial preenchido à máquina. */
.ficha-identificacao {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0 0 14px;
}

.ficha-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--regua-2);
}

.ficha-campo.campo-largo {
  grid-column: span 2;
}

/* Rótulo em versalete: menor que o valor, sem gritar como caixa-alta cheia.
   Navegador sem font-variant-caps cai no texto normal, que continua legível. */
.ficha-campo-rotulo {
  color: var(--tinta-3);
  font-size: calc(var(--fs-rubrica) - 1px);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-caps: all-small-caps;
  text-transform: none;
}

.ficha-campo-valor {
  overflow: hidden;
  color: var(--tinta);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ficha-campo.mono .ficha-campo-valor {
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

/* Blocos "Dados do empregador" e "Dados do empregado": rente, sem a folga de
   um formulário de tela. Dois blocos ocupam a altura que a identificação
   larga ocupava sozinha. */
.ficha-identificacao.ficha-bloco {
  gap: 7px 16px;
  margin: 0 0 10px;
}

.ficha-identificacao.ficha-bloco .ficha-campo {
  gap: 0;
  padding-bottom: 2px;
}

/* Num documento legal nenhum valor pode sair cortado: CNPJ, endereço e nome
   de ambiente quebram a linha em vez de virar reticências. */
.ficha-identificacao.ficha-bloco .ficha-campo-valor {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .ficha-identificacao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Seções numeradas da folha, como no protótipo. */
.ficha-secao {
  margin: 20px 0 8px;
  padding-bottom: 5px;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  border-bottom: 1px solid var(--tinta);
}

.ficha-secao:first-of-type {
  margin-top: 0;
}

/* Orientação única do estado vazio: mesmo desenho dos passos, sem afirmar
   sequência onde só existe uma instrução. */
.empty-passo {
  max-width: 60ch;
  margin: 0;
  font-size: var(--fs-sm);
  text-align: left;
}

/* ------------------------------------------------------------
   PAINEL COM NOME — data-marca
   A palavra diagonal ao fundo saiu: a borda do painel a cortava e na
   tela ela lia como sujeira ("BIENTE", "TURA"). O atributo fica, é o
   nome da folha.
   ------------------------------------------------------------ */
[data-marca] {
  position: relative;
  overflow: hidden;
}

[data-marca] > * {
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   FAIXA INTERMEDIÁRIA (861–1100px) — a folha não rola na horizontal
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .field.compact {
    min-width: 0;
  }

  .epi-command-actions,
  .ficha-command-actions,
  .saas-command-actions,
  .row-actions,
  .toolbar {
    flex-wrap: wrap;
  }

  .content,
  .workspace,
  .view,
  .panel,
  .panel-body {
    min-width: 0;
  }

}

/* A faixa entre o colapso do índice (860px) e o do conteúdo (1100px) tinha
   pisos rígidos que empurravam a folha para fora da janela. */
@media (max-width: 1200px) {
  .training-layout,
  .training-layout.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1200px) {
  .epi-metric-grid,
  .ficha-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .epi-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .epi-command,
  .ficha-command {
    grid-template-columns: minmax(0, 1fr);
  }

  .epi-command-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1200px) {
  .audit-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Marginália do item do kit: o grau mínimo em algarismo romano, à esquerda,
   no mesmo lugar em que a norma aparece nas listas de documento. */
.kit-marg {
  flex: none;
  width: 26px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  text-align: right;
  border-right: 1px solid var(--regua);
  padding-right: 6px;
  margin-right: 2px;
}

/* ------------------------------------------------------------
   BLOCOS SATURADOS QUE SOBRARAM DA DIREÇÃO SAAS
   O chip do passo vira algarismo em monoespaçada sobre filete, e a
   miniatura de EPI vira moldura de papel com régua fina.
   ------------------------------------------------------------ */
.cadastro-step > span:not(.badge) {
  width: 28px;
  height: 28px;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--tinta);
  border-radius: var(--r);
}

.cadastro-step.locked > span:not(.badge) {
  color: var(--tinta-3);
  background: transparent;
  border-color: var(--regua-2);
}

.cadastro-step.active > span:not(.badge) {
  color: var(--papel);
  background: var(--tinta);
}

.cadastro-step svg {
  color: var(--tinta-3);
}

.cadastro-step:not(.locked):hover,
.cadastro-step.active {
  transform: none;
  border-color: var(--tinta-3);
  box-shadow: var(--sombra-folha);
}

.epi-photo {
  color: var(--tinta-3);
  background: var(--papel);
  border: 1px solid var(--regua-2);
}

.epi-photo svg {
  color: var(--tinta-3);
}

/* Rastro de assinatura digital: bloco proprio, largura inteira, para nao
   esticar as caixas de assinatura manual da ficha. */
.signature-trail-box {
  border: 1px solid var(--line, #dad3c5);
  border-radius: var(--r, 2px);
  padding: 10px 12px;
  margin: 0 0 12px;
}

.signature-trail-box > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.signature-trail-box .digital-trail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signature-trail-box .digital-trail li {
  font-size: 12px;
  line-height: 1.35;
}

@media print {
  .audit-ficha-sheet .signature-trail-box {
    padding: 2mm 3mm;
    margin-bottom: 4mm;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    grid-template-columns: repeat(3, 1fr);
    gap: 1mm 4mm;
  }

  .audit-ficha-sheet .signature-dual {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   A ficha tem que caber em UMA folha A4 (273 mm uteis com as margens do @page).
   Estas regras valem so no papel: na tela a ficha continua espacosa.
   --------------------------------------------------------------------------- */
@media print {
  .audit-ficha-sheet {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 9pt;
    line-height: 1.25;
  }

  .audit-ficha-sheet .ficha-secao {
    font-size: 9.5pt;
    margin: 4mm 0 1.5mm;
    padding: 0 0 0.8mm;
    line-height: 1.2;
  }

  .audit-ficha-sheet .sheet-header {
    gap: 3mm;
    margin: 0;
    padding: 2mm 0 0;
  }

  .audit-ficha-sheet .sheet-header p,
  .audit-ficha-sheet .sheet-header h3 {
    margin: 0 0 0.8mm;
    line-height: 1.25;
  }

  /* Declaracao legal: o texto e obrigatorio, mas cabe em duas colunas. */
  .audit-ficha-sheet .legal-print-box {
    padding: 2mm 3mm;
    margin: 0;
    font-size: 7.5pt;
    line-height: 1.25;
  }

  .audit-ficha-sheet .legal-print-box h4 {
    font-size: 8.5pt;
    margin: 0 0 1mm;
  }

  .audit-ficha-sheet .legal-print-box p {
    margin: 0 0 1mm;
  }

  .audit-ficha-sheet .legal-print-box ul,
  .audit-ficha-sheet .legal-print-box ol {
    columns: 2;
    column-gap: 5mm;
    margin: 0;
    padding-left: 4mm;
  }

  .audit-ficha-sheet .legal-print-box li {
    margin: 0 0 0.6mm;
    break-inside: avoid;
  }

  .audit-ficha-sheet table {
    font-size: 8pt;
  }

  .audit-ficha-sheet th,
  .audit-ficha-sheet td {
    padding: 1mm 1.5mm;
    line-height: 1.2;
  }

  .audit-ficha-sheet .badge {
    padding: 0.2mm 1mm;
    font-size: 7pt;
  }

  .audit-ficha-sheet .signature-trail-box {
    padding: 1.5mm 2.5mm;
    margin: 0 0 3mm;
  }

  .audit-ficha-sheet .signature-trail-box > span {
    font-size: 7pt;
    margin-bottom: 1mm;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail li {
    font-size: 7pt;
    line-height: 1.2;
    margin: 0;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail small {
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .signature-dual {
    gap: 6mm;
    margin: 0;
  }

  .audit-ficha-sheet .signature-box {
    padding: 0;
    border: 0;
  }

  .audit-ficha-sheet .signature-box > span {
    font-size: 8pt;
  }

  .audit-ficha-sheet .signature-box .manual-line {
    margin-top: 12mm;
    border-bottom: 0.4mm solid #000;
  }

  .audit-ficha-sheet .signature-box small {
    font-size: 7pt;
  }
}

@media print {
  /* Ultimo aperto: margens entre blocos da folha e o texto legal em duas colunas. */
  .audit-ficha-sheet > * {
    margin-top: 0;
  }

  .audit-ficha-sheet .ficha-secao {
    margin: 3mm 0 1.2mm;
  }

  .audit-ficha-sheet .ficha-secao:first-of-type {
    margin-top: 1.5mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    columns: 2;
    column-gap: 5mm;
    padding-left: 4mm;
    margin: 0 0 1mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista li {
    break-inside: avoid;
    margin: 0 0 0.5mm;
    line-height: 1.2;
  }

  .audit-ficha-sheet .legal-print-box .legal-meta {
    display: flex;
    gap: 5mm;
    flex-wrap: wrap;
    font-size: 6.5pt;
    margin: 0;
  }

  .audit-ficha-sheet .table-wrap {
    margin: 0;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media print {
  /* Cada assinatura digital em UMA linha; a lista legal em tres colunas;
     linha de tabela mais baixa. Sem isto a ficha passa da folha. */
  .audit-ficha-sheet .signature-trail-box .digital-trail li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 2mm;
    line-height: 1.15;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail small {
    display: inline;
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    columns: 3;
    column-gap: 4mm;
    font-size: 7pt;
  }

  .audit-ficha-sheet .legal-print-box p {
    font-size: 7pt;
    line-height: 1.2;
  }

  .audit-ficha-sheet td,
  .audit-ficha-sheet th {
    padding: 0.6mm 1.2mm;
    line-height: 1.15;
  }

  .audit-ficha-sheet .sheet-header {
    padding-top: 1mm;
  }

  .audit-ficha-sheet .sheet-header .signature-line {
    align-self: end;
  }
}

@media print {
  /* Ajuste fino para fechar em uma folha: a linha de assinatura manual nao
     precisa de 12 mm de respiro e o texto legal aceita corpo 6,5. */
  .audit-ficha-sheet .signature-box .manual-line {
    margin-top: 8mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    font-size: 6.5pt;
    line-height: 1.15;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista li {
    margin: 0 0 0.3mm;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail li {
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    gap: 0.5mm 4mm;
  }
}

@media print {
  /* O bloco legal inteiro em duas colunas: a declaracao ao lado da lista de
     itens. E o unico jeito de a ficha com muitos EPIs fechar em uma folha. */
  .audit-ficha-sheet .legal-print-box {
    columns: auto;
  }

  .audit-ficha-sheet .legal-print-box h4 {
    column-span: all;
  }

  .audit-ficha-sheet .legal-print-box p,
  .audit-ficha-sheet .legal-print-box .doc-lista li {
    break-inside: avoid;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    columns: 2;
    padding-left: 3.5mm;
  }

  .audit-ficha-sheet .legal-print-box .legal-meta {
    column-span: all;
    margin-top: 1mm;
  }
}

@media print {
  /* Respiro final: cabecalhos de secao, cabecalho da folha e assinaturas.
     Objetivo declarado: a ficha fecha em UMA folha A4 ate 6 EPIs. */
  .audit-ficha-sheet .ficha-secao {
    margin: 2mm 0 1mm;
    font-size: 9pt;
  }

  .audit-ficha-sheet .sheet-header {
    padding-top: 0;
    gap: 2mm;
  }

  .audit-ficha-sheet .signature-box .manual-line {
    margin-top: 5mm;
  }

  .audit-ficha-sheet .signature-trail-box {
    margin-bottom: 2mm;
  }
}

@media print {
  /* Ultimos milimetros: entrelinha da declaracao legal e da tabela. */
  .audit-ficha-sheet .legal-print-box {
    padding: 1.5mm 2.5mm;
  }

  .audit-ficha-sheet .legal-print-box p {
    line-height: 1.15;
  }

  .audit-ficha-sheet td,
  .audit-ficha-sheet th {
    padding: 0.5mm 1.2mm;
  }

  .audit-ficha-sheet .signature-trail-box {
    padding: 1mm 2mm;
  }
}

@media print {
  /* No papel a moldura da tela desaparece: quem define a margem e o @page. */
  .view,
  .view-grid,
  .print-area,
  .print-area > .panel-body,
  .content,
  .workspace,
  .app-shell {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
    background: transparent !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media print {
  /* Medido em 186 mm de largura util (A4 com margem de 12 mm): a folha com
     ate 6 EPIs fecha em uma pagina. Regras conferidas com PDF real. */
  @page {
    size: A4;
    margin: 12mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    font-size: 6pt;
    line-height: 1.1;
    columns: 2;
  }

  .audit-ficha-sheet .legal-print-box p {
    font-size: 6.5pt;
    line-height: 1.12;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3mm 4mm;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail li {
    font-size: 6pt;
    line-height: 1.1;
  }

  .audit-ficha-sheet .sheet-header {
    gap: 1.5mm;
  }

  .audit-ficha-sheet .ficha-secao {
    margin: 1.6mm 0 0.8mm;
  }

  .audit-ficha-sheet td,
  .audit-ficha-sheet th {
    padding: 0.4mm 1mm;
    line-height: 1.1;
  }

  .audit-ficha-sheet .signature-box .manual-line {
    margin-top: 4mm;
  }
}

@media print {
  /* Folga de seguranca: a ficha nao pode virar duas paginas por um milimetro. */
  .audit-ficha-sheet .legal-print-box {
    padding: 1.2mm 2mm;
  }

  .audit-ficha-sheet .legal-print-box h4 {
    font-size: 8pt;
    margin-bottom: 0.6mm;
  }

  .audit-ficha-sheet .legal-print-box .legal-meta {
    font-size: 6pt;
  }

  .audit-ficha-sheet .signature-trail-box {
    padding: 0.8mm 1.6mm;
    margin-bottom: 1.5mm;
  }

  .audit-ficha-sheet .signature-trail-box > span {
    font-size: 6.5pt;
    margin-bottom: 0.5mm;
  }

  .audit-ficha-sheet .signature-box > span {
    font-size: 7.5pt;
  }

  .audit-ficha-sheet .signature-box small {
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .signature-dual {
    gap: 8mm;
  }
}

@media print {
  /* Larguras explicitas: com table-layout fixed e 6 colunas iguais o nome do
     EPI invade a coluna do CA. */
  .audit-ficha-sheet .audit-ficha-records table {
    table-layout: fixed;
    width: 100%;
  }

  /* Sete colunas desde que MOTIVO entrou: sem a sétima largura declarada, a
     coluna Status fechava em zero e sumia do papel. */
  .audit-ficha-sheet .audit-ficha-records th:nth-child(1),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(1) { width: 30%; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(2),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(2) { width: 10%; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(3),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(3) { width: 6%; text-align: right; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(4),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(4) { width: 12%; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(5),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(5) { width: 17%; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(6),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(6) { width: 13%; }
  .audit-ficha-sheet .audit-ficha-records th:nth-child(7),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(7) { width: 12%; }

  .audit-ficha-sheet .audit-ficha-records td,
  .audit-ficha-sheet .audit-ficha-records th {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    hyphens: auto;
  }

  .audit-ficha-sheet .audit-ficha-records td:first-child {
    white-space: normal;
  }

  .audit-ficha-sheet .audit-ficha-records .badge {
    display: inline-block;
    max-width: 100%;
    font-size: 5.5pt;
    padding: 0 0.8mm;
  }
}

@media print {
  /* Nome do EPI em uma linha (o nome completo fica na tela e no PDF do
     servidor) e rastro em tres colunas: fecha a folha com folga. */
  .audit-ficha-sheet .audit-ficha-records td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .audit-ficha-sheet .signature-trail-box .digital-trail {
    grid-template-columns: repeat(3, 1fr);
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    columns: 3;
    column-gap: 3mm;
  }
}

@media print {
  /* No papel a base legal e um paragrafo corrido: cada artigo vira uma frase
     separada por ponto medio. Na tela continua a lista com marginalia. */
  .audit-ficha-sheet .legal-print-box .doc-lista {
    columns: auto;
    display: block;
    padding: 0;
    margin: 0.6mm 0 0.8mm;
    font-size: 6.5pt;
    line-height: 1.2;
    text-align: justify;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista li {
    display: inline;
    border: 0;
    padding: 0;
    margin: 0;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista li::before {
    content: none;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista li + li::before {
    content: " · ";
    font-weight: 700;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista .doc-marg {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    width: auto;
    margin: 0 0.6mm 0 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista .doc-corpo {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    border: 0;
  }
}

@media print {
  /* Selo da tabela em uma linha so: com icone em cima do texto a linha dobra. */
  .audit-ficha-sheet .audit-ficha-records .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8mm;
    white-space: nowrap;
    line-height: 1.1;
  }

  .audit-ficha-sheet .audit-ficha-records td:nth-child(6),
  .audit-ficha-sheet .audit-ficha-records td:nth-child(7) {
    white-space: nowrap;
  }
}

/* ============================================================
   9. BARRA DE COMANDOS, DOSSIÊ DA EMPRESA E FILA DE PROVIDÊNCIAS
   A tarja de serviço do documento: buscar, imprimir e abrir uma
   entrega nova. Depois dela, os dois painéis que o auditor abre
   primeiro. Nenhuma classe antiga muda de nome.
   ============================================================ */

/* ------------------------------------------------------------
   9.2 RESULTADOS DA BUSCA DO ARQUIVO
   O painel vive fora de #app: digitar na busca não pode reconstruir a view
   e apagar um formulário em preenchimento.
   ------------------------------------------------------------ */
.busca-global-slot {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 34px);
}

.busca-global-slot:empty {
  display: none;
}

.busca-global-slot > .busca-global {
  margin: 24px 0 0;
}

.busca-global {
  margin-bottom: var(--s5);
}

.busca-grupo + .busca-grupo {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--regua-fina);
}

.busca-grupo > .rubrica {
  margin: 0 0 var(--s2);
}

.busca-grupo ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.busca-grupo li button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px var(--s2);
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.busca-grupo li button:hover,
.busca-grupo li button:focus-visible {
  background: var(--papel-2);
  border-left-color: var(--oficial);
}

.busca-grupo li strong {
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.busca-grupo li span {
  color: var(--tinta-3);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   9.3 ÍNDICE SEM LASTRO — "--" em vez de 100% sobre base vazia
   ------------------------------------------------------------ */
.stat-card[data-tone="neutral"] {
  border-top-color: var(--regua-2);
}

.stat-vazio {
  color: var(--tinta-3);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   9.4 DOSSIÊ DA EMPRESA + FILA DE PROVIDÊNCIAS
   ------------------------------------------------------------ */
.view-grid.dossie-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.dossie-coluna {
  display: grid;
  gap: var(--s5);
  min-width: 0;
  align-content: start;
}

.providencia-lista {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding-left: var(--s5);
}

.providencia-lista li {
  padding-bottom: var(--s3);
  border-bottom: var(--regua-fina);
}

.providencia-lista li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.providencia strong {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.providencia > span {
  display: block;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.providencia .providencia-prazo {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  letter-spacing: -0.01em;
}

.providencia[data-severity="danger"] strong {
  color: var(--carimbo);
}

.providencia .secondary-button {
  margin-top: 6px;
}

/* ------------------------------------------------------------
   9.5 RISCO POR AMBIENTE — romano, régua de cinco e a palavra
   ------------------------------------------------------------ */
.risco-lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.risco-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 8px 0;
  border-bottom: var(--regua-fina);
}

.risco-linha:last-child {
  border-bottom: 0;
}

.risco-nome {
  min-width: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: var(--fs-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risco {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s2);
}

.risco .rn {
  min-width: 2.2ch;
  color: var(--tinta-2);
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: right;
}

.risco .rb {
  display: flex;
  gap: 2px;
}

.risco .rb i {
  display: block;
  width: 8px;
  height: 12px;
  background: var(--papel-3);
  border: 1px solid var(--regua);
}

.risco .rb i.on {
  background: var(--tinta-3);
  border-color: var(--tinta-3);
}

.risco .rt {
  min-width: 9ch;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risco.n1 .rb i.on { background: var(--selo); border-color: var(--selo); }
.risco.n2 .rb i.on { background: var(--ambar); border-color: var(--ambar); }
.risco.n3 .rb i.on { background: var(--laranja); border-color: var(--laranja); }
.risco.n4 .rb i.on { background: var(--carimbo); border-color: var(--carimbo); }
.risco.n3 .rn { color: var(--laranja); }
.risco.n4 .rn { color: var(--carimbo); }

/* ------------------------------------------------------------
   9.6 CELULAR — busca em largura total, comandos ao alcance do polegar
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .view-grid.dossie-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .risco-linha {
    flex-wrap: wrap;
  }
}

@media print {
  .busca-global {
    display: none !important;
  }
}

/* ============================================================
   10. VOCABULÁRIO DE ARQUIVO NAS DEMAIS TELAS
   Rubricas de norma, cabeçalhos de folha e chamadas de seção nas
   telas de ambiente, dossiê, entrega e catálogo. Só acrescenta.
   ============================================================ */

/* ---- 10.1 Lista de conferência do kit do ambiente ---- */
#sectorKitBlock > .aba-folha,
.kit-conferencia > .aba-folha {
  margin: 0 0 10px;
  padding: 5px 10px 4px;
  border: 1px solid var(--regua);
}

.kit-titulo {
  margin: 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.kit-chamada {
  margin: 3px 0 8px;
  max-width: 74ch;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
}

/* ---- 10.2 Livro-razao dos dossies ---- */
.folha-rodape {
  margin: 12px 0 0;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

.dossie-placar {
  color: var(--tinta);
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 10.3 Selo da capa do dossie ---- */
.dossie-selo {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dossie-selo-nota {
  margin: 0;
  max-width: 15ch;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.35;
  text-align: center;
}

/* A coluna de ações do livro-razão nunca empilha: com mais colunas no
   dossiê, empilhar três ícones triplicava a altura de cada linha. */
.table-wrap td.col-acoes .row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* ---- 10.4 Timbre da folha A4 e seção de riscos ---- */
.a4-timbre {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--tinta);
}

.a4-selo {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
}

.a4-emitente {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.a4-emitente b {
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-md);
}

.a4-emitente span {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

.a4-protocolo {
  flex: none;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.5;
  text-align: right;
}

.ficha-riscos {
  margin: 6px 0 0;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Periculosidade na folha: uma linha discreta, so quando ha enquadramento
   da NR-16 confirmado para a pessoa. Nao e o grau de risco do ambiente. */
.ficha-periculosidade {
  margin: 3px 0 0;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
  line-height: 1.45;
}

/* Legenda curta da folha: EPI que a FDS do produto quimico exige. */
.ficha-fds {
  margin: 3px 0 0;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
  line-height: 1.45;
}

/* ---- Ordem de Servico (NR-01) ----
   A OS usa a mesma folha da ficha (.audit-ficha-sheet): timbre, secoes
   numeradas e assinaturas ja vem de la. Aqui ficam so as tres coisas que ela
   tem e a ficha nao: as tabelas de risco/EPI/treinamento, a lista de deveres
   com a norma na margem e a linha de continuacao da folha 2. */
.os-sheet + .os-sheet {
  margin-top: 24px;
}

.os-tabela table {
  min-width: 620px;
  table-layout: fixed;
}

/* A tabela da Ordem de Servico quebra linha na tela. Sem a mesma
   especificidade de `.table-wrap table td` (0-1-2), a regra de nowrap dali
   vencia e o texto vazava por cima da coluna vizinha. */
.os-tabela table td,
.os-tabela table th,
.table-wrap .os-tabela table td,
.table-wrap .os-tabela table th {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.os-deveres li {
  padding: 7px 0;
}

.os-continuacao {
  margin: 0 0 4px;
}

/* Motivo do "a revisar" logo abaixo do selo, na tabela de documentos. */
.cell-note {
  display: block;
  margin-top: 3px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.3;
}

/* A ficha tambem quebra em folhas quando a tabela de entregas nao cabe: mesma
   regra da OS, timbre repetido e "Pagina X de Y" verdadeiro. */
.ficha-sheet + .ficha-sheet {
  margin-top: 24px;
}

.ficha-continuacao {
  margin: 0 0 4px;
}

@media print {
  /* Cada folha da OS e uma pagina: a quebra e entre secoes, nunca no meio de
     uma tabela. Medido com tests/os-a4.py. */
  .os-sheet {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Mesma regra para a folha da ficha, medida com tests/ficha-a4.py. */
  .ficha-sheet {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A folha e um grid: com 17 blocos, o gap de 14px da tela virava 224px de
     papel sozinho — mais de um quinto da A4. No papel o ritmo vertical vem do
     gap unico, e cada bloco entra sem margem propria. */
  .audit-ficha-sheet.os-sheet {
    gap: 1.2mm;
  }

  .audit-ficha-sheet.os-sheet > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  .audit-ficha-sheet.os-sheet .ficha-secao {
    margin-top: 1.4mm;
  }

  .audit-ficha-sheet.os-sheet .ficha-secao:first-of-type {
    margin-top: 0;
  }

  .audit-ficha-sheet.os-sheet .legal-print-box p {
    font-size: 5.8pt;
    line-height: 1.15;
  }

  .audit-ficha-sheet.os-sheet .signature-dual .manual-line {
    margin-top: 5mm;
  }

  /* Nada de reticencias num documento legal: origem de risco cortada no meio
     e "Vias respir..." nao provam coisa nenhuma. As colunas tem largura
     declarada e o texto quebra a linha. */
  .audit-ficha-sheet .os-tabela td,
  .audit-ficha-sheet .os-tabela th {
    padding: 0.35mm 1.2mm;
    font-size: 7pt;
    line-height: 1.12;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
  }

  /* Tres colunas: o nivel do ambiente saiu da tabela e virou linha unica. */
  .audit-ficha-sheet .os-tabela-riscos th:nth-child(1),
  .audit-ficha-sheet .os-tabela-riscos td:nth-child(1) { width: 48%; }
  .audit-ficha-sheet .os-tabela-riscos th:nth-child(2),
  .audit-ficha-sheet .os-tabela-riscos td:nth-child(2) { width: 20%; }
  .audit-ficha-sheet .os-tabela-riscos th:nth-child(3),
  .audit-ficha-sheet .os-tabela-riscos td:nth-child(3) { width: 32%; }

  .audit-ficha-sheet .os-tabela-epis th:nth-child(1),
  .audit-ficha-sheet .os-tabela-epis td:nth-child(1) { width: 30%; }
  .audit-ficha-sheet .os-tabela-epis th:nth-child(2),
  .audit-ficha-sheet .os-tabela-epis td:nth-child(2) { width: 12%; }
  .audit-ficha-sheet .os-tabela-epis th:nth-child(3),
  .audit-ficha-sheet .os-tabela-epis td:nth-child(3) { width: 15%; }
  .audit-ficha-sheet .os-tabela-epis th:nth-child(4),
  .audit-ficha-sheet .os-tabela-epis td:nth-child(4) { width: 27%; }
  .audit-ficha-sheet .os-tabela-epis th:nth-child(5),
  .audit-ficha-sheet .os-tabela-epis td:nth-child(5) { width: 16%; }

  .audit-ficha-sheet .os-tabela-cursos th:nth-child(1),
  .audit-ficha-sheet .os-tabela-cursos td:nth-child(1) { width: 45%; }
  .audit-ficha-sheet .os-tabela-cursos th:nth-child(2),
  .audit-ficha-sheet .os-tabela-cursos td:nth-child(2) { width: 22%; }
  .audit-ficha-sheet .os-tabela-cursos th:nth-child(3),
  .audit-ficha-sheet .os-tabela-cursos td:nth-child(3) { width: 10%; }
  .audit-ficha-sheet .os-tabela-cursos th:nth-child(4),
  .audit-ficha-sheet .os-tabela-cursos td:nth-child(4) { width: 23%; }

  .audit-ficha-sheet.os-sheet .signature-dual .manual-line {
    margin-top: 4.5mm;
  }

  /* Os seis deveres em duas colunas, cada um numa linha corrida com a norma na
     frente: em uma coluna a lista sozinha comia um sexto da folha. */
  .audit-ficha-sheet .os-deveres {
    /* `columns` nao vale em container de grid: a .doc-lista precisa virar
       bloco no papel para as duas colunas existirem. */
    display: block;
    columns: 2;
    column-gap: 5mm;
    margin: 0.6mm 0 0;
  }

  .audit-ficha-sheet .os-deveres li {
    display: block;
    break-inside: avoid;
    padding: 0.2mm 0;
    border-bottom-width: 0.15mm;
  }

  .audit-ficha-sheet .os-deveres li:first-child {
    border-top: 0;
  }

  .audit-ficha-sheet .os-deveres .doc-marg,
  .audit-ficha-sheet .os-deveres .doc-corpo {
    display: inline;
    padding: 0;
    font-size: 6.2pt;
    line-height: 1.15;
    text-align: left;
    border: 0;
  }

  .audit-ficha-sheet .os-deveres .doc-marg::after {
    content: " — ";
  }

  /* Timbre da OS mais baixo: o nome do documento e o protocolo, nada mais. */
  .audit-ficha-sheet.os-sheet .a4-selo {
    width: 7.5mm;
    height: 7.5mm;
    font-size: 5.5pt;
  }

  .audit-ficha-sheet.os-sheet .a4-protocolo {
    font-size: 6pt;
    line-height: 1.2;
  }

  .audit-ficha-sheet .os-continuacao {
    font-size: 7pt;
    margin: 0 0 0.8mm;
  }
}

/* Arquivo de produtos quimicos e FDS, dentro do catalogo de EPIs e CA. */
.chemical-panel .chemical-table td {
  vertical-align: top;
}

.chemical-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--regua);
}

.chemical-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chemical-form select[multiple] {
  min-height: 150px;
}

/* Rubrica que separa blocos dentro de um formulário de folha. */
.campo-rubrica {
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--regua);
}

.form-grid > .campo-rubrica.full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .a4-timbre {
    flex-wrap: wrap;
  }

  .a4-protocolo {
    text-align: left;
  }
}

/* ---- 10.5 Capa do dossiê: campos dentro da capa, como no protótipo ---- */
.employee-detail-title > .capa-campos {
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
}

.employee-detail-title > .capa-campos .detail-block {
  padding: 0 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--regua);
  border-radius: 0;
}

.employee-detail-title > .capa-campos .detail-block:hover {
  background: none;
  transform: none;
}

@media (max-width: 900px) {
  .employee-detail-title > .capa-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ------------------------------------------------------------
   3.11 TELA II — inventário por ambiente (anexo I do PGR)
   Matriz 5x5 e cobertura por grupo de risco, como no protótipo.
   ------------------------------------------------------------ */
.inventario-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .inventario-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.matriz {
  display: grid;
  grid-template-columns: auto repeat(5, minmax(0, 1fr));
  gap: 3px;
  max-width: 340px;
}

.matriz-eixo {
  display: grid;
  place-items: center;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10px;
}

.matriz-cel {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

/* Nunca só cor: cada faixa tem contorno próprio (pontilhado, tracejado,
   sólido, pontilhado de fundo e duplo). */
.matriz-cel.c1 { background: var(--selo-bg); color: var(--selo); border: 1px dotted var(--selo); }
.matriz-cel.c2 { background: var(--oliva-bg); color: var(--oliva); border: 1px dashed var(--oliva); }
.matriz-cel.c3 { background: var(--ambar-bg); color: var(--ambar); border: 1px solid var(--ambar); }
.matriz-cel.c4 {
  background: var(--laranja-bg);
  background-image: radial-gradient(currentColor 0.6px, transparent 0.7px);
  background-size: 4px 4px;
  color: var(--laranja);
  border: 2px solid var(--laranja);
}
.matriz-cel.c5 {
  background: var(--carimbo-bg);
  color: var(--carimbo);
  border: 2px double var(--carimbo);
}

.matriz-legenda {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--regua);
}

.nota-folha {
  margin: 14px 0 0;
  padding: 9px 12px;
  color: var(--tinta-2);
  font-size: var(--fs-rubrica);
  line-height: 1.45;
  background: var(--papel-2);
  border-left: 3px solid var(--oficial);
}

/* Entrada contextual do índice: o documento aberto agora, recuado sob o
   verbete a que pertence. */
.nav-item.nav-contextual {
  padding-left: 30px;
}

.nav-item.nav-contextual .nav-num {
  color: var(--tinta-3);
}

.nav-item.nav-contextual .nav-label {
  font-style: italic;
}

/* Fila de filtros contados do arquivo de pessoal. */
.filtro-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--regua);
}

.filtro-chips .rubrica {
  margin-right: 4px;
  color: var(--tinta-3);
}

.filtro-chip {
  padding: 5px 11px;
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 600;
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
  cursor: pointer;
}

.filtro-chip:hover {
  background: var(--papel-3);
}

.filtro-chip.ativo {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--tinta);
  box-shadow: inset 0 -2px 0 var(--tinta);
}

.filtro-chip .mono {
  font-family: var(--mono);
  color: var(--tinta-3);
}

/* Chip de problema com algo atrás dele: o número sai na tinta de carimbo. */
.filtro-chip.alerta .mono {
  color: var(--carimbo);
  font-weight: 700;
}

/* Filtros do catálogo: situação em chips; categoria, ordem e o total na
   linha de baixo. O total fica à direita para ser lido junto da tabela. */
.catalogo-filtros {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--regua);
}

.catalogo-filtros .filtro-chips {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.catalogo-filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

.catalogo-filtros-linha .field.compact {
  flex: 0 1 240px;
  min-width: 180px;
}

.catalogo-filtros-total {
  margin: 0 0 8px auto;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
}

.catalogo-filtros-total b {
  color: var(--tinta);
  font-family: var(--mono);
}

/* O botão fantasma herda largura cheia de outras telas; aqui ele é do tamanho
   do rótulo e fica ao lado do total. */
.catalogo-filtros-linha .ghost-button {
  flex: none;
  width: auto;
  margin-bottom: 2px;
}

/* Selo dentro do livro-razão é compacto: com ASO e Ordem de Serviço na mesma
   linha, o placar Dossiê precisa caber sem rolagem lateral. */
.table-wrap .badge {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* "Ordem de Serviço" pode ocupar duas linhas no cabeçalho: é preferível a
   empurrar a coluna Dossiê para fora da tela. */
.employee-list-panel thead th {
  white-space: normal;
}

/* O placar Dossiê é o assunto da tela: em telas estreitas ele acompanha o
   chevron na faixa fixa da direita, em vez de sumir atrás da rolagem. */
.employee-list-panel .table-wrap th.col-acoes,
.employee-list-panel .table-wrap td.col-acoes {
  width: 56px;
  min-width: 56px;
}

.employee-list-panel .table-wrap th.dossie-placar,
.employee-list-panel .table-wrap td.dossie-placar {
  position: sticky;
  right: 56px;
  z-index: 1;
  width: 64px;
  min-width: 64px;
  background: var(--papel);
  box-shadow: -1px 0 0 var(--regua);
}

.employee-list-panel .table-wrap tbody tr:nth-child(even) td.dossie-placar {
  background: var(--papel-2);
}

.employee-list-panel .table-wrap thead th.dossie-placar {
  background: var(--papel-2);
}

@media print {
  /* A folha ganhou timbre, riscos da funcao e a identificacao em campos: tudo
     conteudo do prototipo, que cabe em UMA pagina. O que muda no papel e o
     ritmo vertical. Medido com tests/ficha-a4.py. */
  .audit-ficha-sheet .a4-timbre {
    padding: 0 0 1.5mm;
    margin: 0 0 1.5mm;
    gap: 3mm;
    align-items: center;
  }

  .audit-ficha-sheet .a4-selo {
    width: 9mm;
    height: 9mm;
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .a4-emitente {
    font-size: 7.5pt;
    line-height: 1.2;
  }

  .audit-ficha-sheet .a4-emitente strong {
    font-size: 8.5pt;
  }

  .audit-ficha-sheet .a4-protocolo {
    font-size: 6.5pt;
    line-height: 1.25;
  }

  /* Identificacao: quatro colunas em vez de duas, campos rentes. */
  .audit-ficha-sheet .ficha-identificacao {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5mm 4mm;
    margin: 0;
  }

  .audit-ficha-sheet .ficha-campo {
    margin: 0;
    padding: 0;
    line-height: 1.15;
    font-size: 8pt;
  }

  .audit-ficha-sheet .ficha-campo > span:first-child,
  .audit-ficha-sheet .ficha-campo .rotulo {
    font-size: 6pt;
    letter-spacing: 0.04em;
  }

  /* A assinatura do empregado fica na secao 5, como no prototipo: a linha
     solta na secao 1 so ocupa altura. */
  .audit-ficha-sheet .ficha-identificacao + .signature-line,
  .audit-ficha-sheet .ficha-secao + .signature-line {
    display: none;
  }

  .audit-ficha-sheet .ficha-riscos {
    font-size: 7.5pt;
    line-height: 1.2;
    margin: 0;
  }

  .audit-ficha-sheet .ficha-periculosidade,
  .audit-ficha-sheet .ficha-fds {
    font-size: 6.8pt;
    line-height: 1.15;
    margin: 0.4mm 0 0;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    grid-template-columns: repeat(3, 1fr);
  }

  .audit-ficha-sheet .signature-dual .manual-line {
    margin-top: 9mm;
  }
}

@media print {
  /* Ultimos 13 mm: cabecalhos de secao, tabela e rastro. */
  .audit-ficha-sheet .ficha-secao {
    margin: 1.2mm 0 0.6mm;
    font-size: 8.5pt;
  }

  .audit-ficha-sheet .audit-ficha-records td,
  .audit-ficha-sheet .audit-ficha-records th {
    padding: 0.3mm 1mm;
    line-height: 1.05;
    font-size: 7.5pt;
  }

  .audit-ficha-sheet .signature-trail-box {
    padding: 0.6mm 1.4mm;
    margin-bottom: 1.2mm;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail li {
    font-size: 5.8pt;
    line-height: 1.05;
  }

  .audit-ficha-sheet .legal-print-box {
    padding: 1mm 1.6mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    font-size: 5.8pt;
  }

  .audit-ficha-sheet .signature-dual .manual-line {
    margin-top: 7mm;
  }

  .audit-ficha-sheet .a4-timbre {
    padding-bottom: 1mm;
    margin-bottom: 1mm;
  }
}

@media print {
  /* Folga de seguranca: a declaracao legal em duas colunas e o rastro mais
     rente fecham a folha com margem, e nao no limite. */
  .audit-ficha-sheet .legal-print-box p {
    font-size: 6pt;
    line-height: 1.1;
    margin: 0 0 0.6mm;
  }

  .audit-ficha-sheet .legal-print-box .doc-lista {
    font-size: 5.6pt;
    line-height: 1.05;
  }

  .audit-ficha-sheet .legal-print-box .legal-meta {
    font-size: 5.6pt;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    gap: 0.2mm 3mm;
  }

  .audit-ficha-sheet .signature-box > span {
    font-size: 7pt;
  }

  .audit-ficha-sheet .signature-box small {
    font-size: 6pt;
  }

  .audit-ficha-sheet .signature-dual .manual-line {
    margin-top: 6mm;
  }

  .audit-ficha-sheet .ficha-identificacao {
    gap: 1mm 4mm;
  }
}

/* Resumo das assinaturas: some na tela (onde a lista detalhada manda) e
   substitui a lista no papel, onde ela ocupava um terco da folha. */
.trail-resumo {
  display: none;
}

@media print {
  .audit-ficha-sheet .trail-resumo {
    display: block;
    margin: 0;
    font-size: 7pt;
    line-height: 1.2;
  }

  .audit-ficha-sheet .signature-trail-box .digital-trail {
    display: none;
  }
}

/* ------------------------------------------------------------
   FORMULÁRIO NOVO DA FICHA — dois blocos compactos no topo
   "Dados do empregador" e "Dados do empregado" trocam os campos largos
   empilhados por quatro colunas de rótulo em versalete com o valor abaixo.
   Medido com tests/ficha-a4.py: 1 e 6 EPIs continuam em UMA folha A4.
   ------------------------------------------------------------ */
/* O resumo do fechamento tem cinco números, e não os quatro da faixa comum:
   sem esta linha o quinto cairia sozinho na segunda fileira. */
.summary-strip.cinco {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

@media (max-width: 1200px) {
  .summary-strip.cinco {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

/* Fechamento mensal: as duas listas de vencimento moram na mesma seção, uma
   por tipo de vencimento. O subtítulo separa a vida útil do EPI da validade do
   CA — são coisas diferentes e a folha não pode misturá-las. */
.fechamento-subtitulo {
  margin: var(--s5) 0 var(--s2);
  font-family: var(--sans);
  font-size: var(--fs-rubrica);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.fechamento-subtitulo:first-child {
  margin-top: 0;
}

/* Quadro de números do mês na folha A4 do fechamento. Só sai no papel: na tela
   quem mostra os mesmos números é a faixa de resumo do painel. */
.fechamento-numeros {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}

.fechamento-numero {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--regua);
}

.fechamento-numero-rotulo {
  display: block;
  font-size: var(--fs-rubrica);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.fechamento-numero strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
}

@media print {
  /* O timbre passou a carregar o nome do documento: a razão social mora no
     bloco 1, e a folha economiza o título centralizado que havia embaixo. */
  .audit-ficha-sheet .a4-emitente b {
    font-size: 9pt;
    line-height: 1.15;
  }

  .audit-ficha-sheet .a4-emitente .rubrica {
    font-size: 6.5pt;
  }

  .audit-ficha-sheet .ficha-identificacao.ficha-bloco {
    gap: 0.8mm 4mm;
    margin: 0 0 0.8mm;
  }

  .audit-ficha-sheet .ficha-empregado {
    gap: 4mm;
  }

  .audit-ficha-sheet .ficha-retrato img {
    width: 20mm;
    height: 26mm;
    border-width: 0.25mm;
  }

  .audit-ficha-sheet .ficha-retrato figcaption {
    font-size: 6pt;
  }

  .audit-ficha-sheet .ficha-bloco .ficha-campo {
    padding-bottom: 0.2mm;
  }

  .audit-ficha-sheet .ficha-campo-rotulo {
    font-size: 6pt;
    letter-spacing: 0.06em;
  }

  .audit-ficha-sheet .ficha-campo-valor {
    font-size: 7.5pt;
  }
}

/* ------------------------------------------------------------
   GRÁFICOS — SVG escrito por nós, sem biblioteca e sem CDN
   O gráfico ilustra; a tabela logo abaixo é a fonte. O SVG não tem viewBox de
   propósito: as medidas verticais estão em pixel (o texto tem sempre o mesmo
   corpo, no celular e no monitor) e as larguras das barras em porcentagem
   (acompanham o container). É o que deixa a leitura inteira a 390 px sem
   rolagem lateral.
   ------------------------------------------------------------ */
/* minmax(0, 1fr) e min-width: 0 não são enfeite: sem eles a trilha do grid se
   dimensiona pelo max-content da TABELA que vem dentro do gráfico, e a folha
   inteira passa a ter 746 px de largura num celular de 390 px — medido em
   tests/graficos.py. A tabela larga rola dentro do próprio .table-wrap. */
.grafico-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}

.grafico {
  min-width: 0;
  margin: 0;
  padding: var(--s4);
  border: var(--regua-fina);
  background: var(--papel);
}

.grafico-titulo {
  display: block;
  margin-bottom: var(--s2);
}

.grafico-titulo strong {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.grafico-titulo span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-rubrica);
  color: var(--tinta-3);
}

.grafico-svg {
  display: block;
  width: 100%;
  margin: var(--s2) 0 var(--s3);
  overflow: visible;
}

.grafico-svg text {
  font-family: var(--sans);
}

/* Legenda em HTML e não dentro do SVG: em 390 px três rótulos escritos no
   desenho se atropelam, e o HTML quebra a linha sozinho. */
.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  font-size: var(--fs-rubrica);
  color: var(--tinta-2);
}

.grafico-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

/* A marca da legenda repete cor E trama da barra: em preto e branco é a trama
   que separa uma série da outra, como nas réguas de progresso do painel. */
.grafico-marca {
  display: inline-block;
  width: 18px;
  height: 11px;
  border: 1px solid var(--regua-2);
  background-color: var(--marca, var(--oficial));
}

.grafico-marca.trama-hachura {
  background-image: repeating-linear-gradient(45deg, var(--papel) 0 2px, transparent 2px 6px);
}

.grafico-marca.trama-pontos {
  background-image: radial-gradient(circle at 2px 2px, var(--papel) 1.1px, transparent 1.2px);
  background-size: 5px 5px;
}

/* A nota do gráfico é texto corrido de duas a três linhas: usa o corpo miúdo
   da rubrica, mas SEM a caixa alta — versalete em três linhas não se lê. */
.grafico-nota {
  margin: var(--s2) 0 0;
  font-size: var(--fs-rubrica);
  line-height: 1.4;
  color: var(--tinta-3);
}

.grafico .table-wrap {
  margin-top: var(--s2);
}

.grafico tfoot th,
.grafico tfoot td {
  border-top: var(--regua-media);
  font-weight: 700;
}

/* O bloco POR ESCRITO: uma frase gerada do próprio dado dizendo o que os
   desenhos mostram. É o que o dono lê em voz alta na reunião. */
.grafico-leitura {
  margin-top: var(--s6);
  padding: var(--s4);
  border-left: 3px solid var(--oficial);
  background: var(--oficial-bg);
}

.grafico-leitura p:last-child {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .grafico {
    padding: var(--s3);
  }

  .grafico-leitura {
    padding: var(--s3);
  }

  /* Doze meses em duas séries dão colunas de 5 px num celular: o número em
     cima da coluna passa a se atropelar com o do vizinho. Ele sai do desenho e
     continua na tabela logo abaixo, que é a fonte. */
  .grafico-svg .grafico-valor {
    display: none;
  }

  /* A tabela do gráfico É a fonte do desenho, e a 390 px ela mostrava só a
     coluna de rótulo: TOTAL e % DO TOTAL ficavam fora da área visível, atrás de
     uma rolagem que não se anuncia no Windows. Aqui o rótulo passa a quebrar
     linha e as colunas de número encolhem, para as três caberem na tela. A
     rolagem do .table-wrap continua valendo quando nem assim couber. */
  .grafico .table-wrap table {
    /* O `min-width: 720px` do livro-razão é o que empurrava as colunas de
       número para fora da tela; aqui a tabela do gráfico abre mão dele. */
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .grafico .table-wrap table th,
  .grafico .table-wrap table td {
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .grafico .table-wrap table th[scope="row"],
  .grafico .table-wrap table thead th:first-child,
  .grafico .table-wrap table tfoot th {
    width: 42%;
  }
}

@media print {
  /* overflow-wrap: anywhere parte no meio do caractere. Numa tabela de relatorio
     isso vira "01/09/202" + "6". Nome longo continua quebrando; data, CA,
     quantidade e assinatura, nao. */
  .audit-ficha-sheet .fechamento-tabela td,
  .audit-ficha-sheet .fechamento-tabela th {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .audit-ficha-sheet .fechamento-tabela td:nth-child(1),
  .audit-ficha-sheet .fechamento-tabela td:nth-child(5),
  .audit-ficha-sheet .fechamento-tabela td:nth-child(6),
  .audit-ficha-sheet .fechamento-tabela td:last-child {
    white-space: nowrap;
  }
}

/* Cabecalho em versalete com espacamento de letra quebrava como "ENTRE GAS"
   na folha estreita: o rotulo curto nao se parte. */
@media (max-width: 640px) {
  .grafico .table-wrap table thead th,
  .stat-label,
  .rubrica {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* ============================================================
   CAMADA DE HARMONIA — a tela ganha a cara da marca
   O papel manda no documento; aqui manda o conforto de uso.
   Tudo dentro de @media screen: o A4 impresso não muda de vida.
   Regra que vale para o arquivo inteiro: o que é FOLHA
   (.print-area, .audit-ficha-sheet) continua reto, austero e
   carimbado; o que é INTERFACE fica macio, colorido e responde
   ao toque. As duas linguagens convivem sem se contaminar.
   ============================================================ */
@media screen {
  /* ---------- 1. A MESA ----------
     O fundo deixa de ser papel envelhecido e vira uma mesa clara
     com dois halos da marca: azul no alto, teal no rodapé. */

  /* ---------- 6. SELOS DE ESTADO NA TELA ----------
     Na tela o selo vira pastilha macia com ponto de cor. A
     hachura de carimbo continua existindo — mas só dentro da
     folha e no papel, que é onde ela tem função. */
  .badge {
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    background-color: var(--b-fundo);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--b-tinta) 26%, transparent);
    border-radius: var(--r-pill);
  }

  .badge::before {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .badge.warn {
    border-style: solid;
  }

  .badge.danger,
  .badge.high {
    border-width: 1px;
  }

  /* Dentro da folha o selo volta a ser carimbo. */
  .print-area .badge,
  .audit-ficha-sheet .badge,
  .print-sheet .badge {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
  }

  .print-area .badge.danger,
  .audit-ficha-sheet .badge.danger,
  .print-sheet .badge.danger {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 30%, transparent) 0 2px, transparent 2px 6px);
  }

  /* Foco visível e da cor da marca, em tudo que se opera pelo teclado. */
  .primary-button:focus-visible,
  .secondary-button:focus-visible,
  .ghost-button:focus-visible,
  .nav-item:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="tab"]:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--marca-acao);
    outline-offset: 2px;
    box-shadow: var(--anel-foco);
  }

  /* ---------- 8. CAMPOS ----------
     Campo com fundo levíssimo e anel de foco da marca: mostra
     onde o cursor está sem precisar de moldura preta. */
  .field input,
  .field select,
  .field textarea,
  .campo-busca,
  input[type="search"],
  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    border-radius: var(--r-sm);
    transition:
      border-color var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--regua-3);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus,
  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--marca-acao);
    outline: none;
    box-shadow: var(--anel-foco);
  }

  .campo-busca:focus-within {
    border-color: var(--marca-acao);
    box-shadow: var(--anel-foco);
  }

  /* ---------- 9. TABELAS ----------
     A linha inteira reage ao ponteiro e o cabeçalho ganha fundo
     próprio: a leitura para de depender de contar filetes. */
  /* O canto arredondado NAO pode recortar a rolagem: a tabela larga
     precisa continuar rolando na horizontal (overflow-x: auto). */
  .table-wrap {
    border: 1px solid var(--regua);
    box-shadow: var(--sombra-baixa);
  }

  .table-wrap table th {
    color: var(--marca-navy);
    background: var(--papel-2);
  }

  .table-wrap table tbody tr {
    transition: background-color var(--dur-2) var(--ease);
  }

  .table-wrap table tbody tr:hover {
    background: var(--oficial-bg);
  }

  /* ---------- 10. ESTADO VAZIO ----------
     Deixa de ser papel hachurado com aviso e vira convite: fundo
     macio, tinta da marca e a orientação em passos legíveis. */
  .empty-state {
    background-color: var(--papel-2);
    background-image: radial-gradient(420px 180px at 50% 0%, var(--oficial-bg), transparent 70%);
    border: 1px dashed var(--regua-2);
    border-radius: var(--r);
  }

  .empty-titulo {
    color: var(--marca-navy);
  }


  /* ---------- 11. AVISO FLUTUANTE ----------
     O aviso entra de baixo, com o filete da marca e canto macio. */
  .toast {
    border: 1px solid var(--regua-2);
    border-left: 4px solid var(--marca-teal);
    border-radius: var(--r-sm);
    box-shadow: var(--sombra-alta);
  }

  dialog {
    border: 1px solid var(--regua-2);
    border-top: 3px solid var(--marca-azul);
    box-shadow: var(--sombra-alta);
  }

  /* ---------- 12. A FOLHA CONTINUA FOLHA ----------
     Nada acima vale para o documento: ele mantém o canto reto, a
     régua preta de fechamento e a austeridade que o auditor lê. */
  .print-area,
  .audit-ficha-sheet,
  .print-sheet,
  .sheet-header {
    border-radius: var(--r-folha);
  }

  .audit-ficha-sheet,
  .print-sheet {
    border-color: var(--regua-2);
  }

  .audit-ficha-top,
  .sheet-header {
    border-bottom-color: var(--tinta);
  }

  .print-area .table-wrap,
  .audit-ficha-sheet .table-wrap {
    border-radius: var(--r-folha);
    box-shadow: none;
  }

  .print-area .table-wrap table tbody tr:hover,
  .audit-ficha-sheet .table-wrap table tbody tr:hover {
    background: transparent;
  }

  /* ---------- 13. MOVIMENTO ----------
     Entrada curta e discreta, só quando a TELA troca (#app.vista-nova,
     marcada em render()). Salvar um campo refaz o #app inteiro, e a tela
     não pode pular a cada clique. Quem pediu menos movimento não vê nada. */
  .vista-nova .view > * {
    animation: fade-up var(--dur-3) var(--ease) both;
  }

  .vista-nova .view > *:nth-child(2) {
    animation-delay: 40ms;
  }
  .vista-nova .view > *:nth-child(3) {
    animation-delay: 80ms;
  }
  .vista-nova .view > *:nth-child(4) {
    animation-delay: var(--dur-1);
  }
  .vista-nova .view > *:nth-child(n + 5) {
    animation-delay: var(--dur-2);
  }

  .vista-nova .stats-grid > .stat-card {
    animation: fade-up var(--dur-3) var(--ease) both;
  }
  .vista-nova .stats-grid > .stat-card:nth-child(2) {
    animation-delay: 60ms;
  }
  .vista-nova .stats-grid > .stat-card:nth-child(3) {
    animation-delay: var(--dur-1);
  }
  .vista-nova .stats-grid > .stat-card:nth-child(4) {
    animation-delay: var(--dur-2);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .vista-nova .view > *,
  .vista-nova .stats-grid > .stat-card {
    animation: none;
  }

  .nav-item,
  .stat-card,
  .primary-button,
  .secondary-button,
  .ghost-button,
  .panel {
    transition: none;
  }

  .nav-item:hover,
  .stat-card:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .ghost-button:hover {
    transform: none;
  }
}

/* ============================================================
   ABERTURA DO PAINEL — o cartaz da marca e o roteiro de partida
   Um bloco em cor cheia no topo do painel: é a única superfície
   do sistema que fala com a pessoa antes de falar com o arquivo.
   Fora dele, tudo continua papel branco e régua.
   ============================================================ */
@media screen {
  .hero-texto {
    display: grid;
    gap: 10px;
    align-content: center;
  }

  .hero-saudacao {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: rgba(233, 241, 251, 0.72);
  }

  .hero-saudacao::before {
    width: 18px;
    height: 1px;
    content: "";
    background: rgba(233, 241, 251, 0.5);
  }

  .hero-titulo {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: 0.005em;
  }

  .hero-leitura {
    max-width: 62ch;
    margin: 0;
    color: rgba(233, 241, 251, 0.9);
    font-size: var(--fs-md);
    line-height: 1.5;
  }

  .hero-leitura b {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .hero-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
  }

  /* No fundo escuro o botão principal inverte: fundo claro, tinta da
     marca. É o único ponto branco cheio do bloco, então é o que o olho
     encontra primeiro. */
  .painel-hero .primary-button {
    color: var(--marca-navy);
    background: #fff;
    border-color: #fff;
    box-shadow: var(--shadow-md);
  }

  .painel-hero .primary-button:hover {
    color: var(--marca-navy);
    background: #f2f7ff;
    border-color: #f2f7ff;
  }

  .painel-hero .secondary-button {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.34);
  }

  .painel-hero .secondary-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
  }

  .painel-hero .secondary-button svg,
  .painel-hero .primary-button svg {
    color: currentColor;
  }

  .painel-hero :is(.primary-button, .secondary-button):focus-visible {
    outline-color: #fff;
    box-shadow: var(--anel-foco);
  }

  /* ---------- aro de conformidade ---------- */
  .hero-aro {
    display: grid;
    gap: 8px;
    justify-items: center;
  }

  .aro-conformidade {
    position: relative;
    width: 128px;
    height: 128px;
  }

  .aro-conformidade svg {
    width: 100%;
    height: 100%;
    /* começa no alto, como mostrador de relógio */
    transform: rotate(-90deg);
  }

  .aro-trilho,
  .aro-marca {
    fill: none;
    stroke-width: 11;
  }

  .aro-trilho {
    stroke: rgba(255, 255, 255, 0.16);
  }

  .aro-marca {
    stroke: var(--aro-cor, #7dd3fc);
    stroke-linecap: round;
    animation: aro-encher var(--dur-3) var(--ease) both;
  }

  .aro-conformidade[data-tone="green"] {
    --aro-cor: #3ed9a4;
  }
  .aro-conformidade[data-tone="amber"] {
    --aro-cor: #f6c85a;
  }
  .aro-conformidade[data-tone="red"] {
    --aro-cor: #ff9b8f;
  }
  .aro-conformidade[data-tone="neutral"] {
    --aro-cor: rgba(255, 255, 255, 0.42);
  }

  .aro-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0;
    margin: 0;
    text-align: center;
  }

  .aro-centro strong {
    color: #fff;
    font-size: var(--fs-num);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .aro-centro strong span {
    margin-left: 1px;
    font-size: var(--fs-lg);
    opacity: 0.75;
  }

  .aro-centro small {
    margin-top: 3px;
    color: rgba(233, 241, 251, 0.72);
    font-size: var(--fs-rubrica);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hero-aro-nota {
    margin: 0;
    color: rgba(233, 241, 251, 0.78);
    font-size: var(--fs-rubrica);
    text-align: center;
  }

  .hero-aro-nota b {
    color: #fff;
  }

  @keyframes aro-encher {
    from {
      stroke-dasharray: 0 327;
    }
  }

  /* ---------- roteiro de partida ---------- */
  .passos-selo {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 52px;
    height: 30px;
    padding: 0 10px;
    color: var(--marca-navy);
    font-size: var(--fs-sm);
    font-weight: 800;
    background: var(--oficial-bg);
    border: 1px solid color-mix(in srgb, var(--marca-azul) 22%, transparent);
    border-radius: var(--r-pill);
  }

  .passos-trilho {
    position: relative;
    overflow: hidden;
    height: 8px;
    margin-bottom: 16px;
    background: var(--papel-3);
    border-radius: var(--r-pill);
  }

  .passos-preenche {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--marca-azul), var(--marca-teal));
    border-radius: inherit;
    transform-origin: left center;
    animation: meter-sweep var(--dur-3) var(--ease) both;
  }

  .passos-lista {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .passos-lista li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--papel);
    border: 1px solid var(--regua);
    border-radius: var(--r-sm);
    transition:
      border-color var(--dur-2) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  .passos-lista li:hover {
    background: var(--papel-2);
    border-color: var(--regua-2);
  }

  .passos-lista li.feito {
    background: var(--selo-bg);
    border-color: color-mix(in srgb, var(--selo) 22%, transparent);
  }

  .passo-marca {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--marca-azul);
    background: var(--oficial-bg);
    border-radius: var(--r-sm);
  }

  .passos-lista li.feito .passo-marca {
    color: #fff;
    background: var(--selo);
  }

  .passo-marca svg {
    width: 17px;
    height: 17px;
  }

  .passo-corpo {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .passo-corpo b {
    color: var(--tinta);
    font-size: var(--fs-body);
  }

  .passo-corpo small {
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    line-height: 1.4;
  }

  .passos-lista li.feito .passo-corpo b {
    color: var(--tinta-2);
  }

  .passo-estado {
    color: var(--selo);
    white-space: nowrap;
  }

  /* ---------- celular: o aro desce e os atalhos empilham ---------- */
  @media (max-width: 900px) {
    .painel-hero {
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
    }

    .hero-aro {
      justify-self: center;
    }

    .passos-lista li {
      grid-template-columns: 34px minmax(0, 1fr);
      row-gap: 8px;
    }

    .passos-lista li > :last-child {
      grid-column: 2;
      justify-self: start;
    }
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .aro-marca,
  .passos-preenche {
    animation: none;
  }

  .passos-lista li {
    transition: none;
  }
}

@media print {
  .painel-hero,
  .passos-inicio {
    display: none !important;
  }
}

/* ============================================================
   HARMONIA (2) — os indicadores das outras telas falam a mesma
   língua do painel, e a hachura de carimbo sai da interface.
   A hachura não some do sistema: continua na folha e no papel,
   onde ela é o que garante o estado em preto e branco.
   ============================================================ */
@media screen {
  /* ---------- indicadores das telas V, VI, IV e IX ---------- */
  .epi-metric-card,
  .ficha-metric-card,
  .training-metric,
  .audit-metrics > div {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--regua);
    border-top: 1px solid var(--regua);
    border-radius: var(--r);
    box-shadow: var(--sombra-folha);
    transition:
      transform var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease);
  }


  .epi-metric-card.danger,
  .training-metric.danger,
  .audit-metrics > div.danger {
    --stat-cor: var(--carimbo);
  }

  .epi-metric-card.warn,
  .training-metric.warn,
  .audit-metrics > div.warn {
    --stat-cor: var(--ambar);
  }

  /* Mesmo corpo numérico do painel: número em sans, forte e apertado. */
  .epi-metric-card strong,
  .ficha-metric-card strong,
  .training-metric strong,
  .audit-metrics > div strong {
    font-family: var(--sans);
    font-size: var(--fs-num);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .epi-metric-card span,
  .ficha-metric-card span,
  .training-metric span,
  .audit-metrics > div span {
    letter-spacing: 0.1em;
  }

  /* O ícone volta a ser medalhão, como no painel, em vez de glifo cinza. */
  .epi-metric-card svg,
  .ficha-metric-card svg,
  .training-metric svg {
    box-sizing: content-box;
    width: 17px;
    height: 17px;
    padding: 7px;
    color: var(--stat-cor, var(--marca-azul));
    background: color-mix(in srgb, var(--stat-cor, var(--marca-azul)) 12%, #fff);
    border-radius: var(--r-sm);
  }

  /* ---------- a hachura sai da interface ----------
     Fora da folha, "vencido" se diz com cor, símbolo e palavra —
     a trama diagonal só atrapalhava a leitura na tela. */
  .badge.danger {
    background-image: none;
  }

  .mk-vencido {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 14%, transparent) 0 2px, transparent 2px 7px);
    border-width: 1px;
    border-radius: var(--r-sm);
  }

  .mk-a-vencer,
  .mk-valido {
    border-radius: var(--r-sm);
  }

  /* Régua de progresso lisa, no degradê da marca. O estado continua
     dito pela cor E pelo número escrito ao lado dela. */
  .bar-track,
  .trial-meter {
    overflow: hidden;
    border-radius: var(--r-pill);
  }

  .bar-fill {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--marca-azul), var(--marca-teal));
    border-radius: var(--r-pill);
    box-shadow: none;
  }

  .bar-fill.warn {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--ambar), color-mix(in srgb, var(--ambar) 55%, #fff));
    box-shadow: none;
  }

  .bar-fill.danger {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--carimbo), color-mix(in srgb, var(--carimbo) 55%, #fff));
    box-shadow: none;
  }

  .trial-meter-fill {
    background: linear-gradient(90deg, var(--marca-azul), var(--marca-teal));
    border-radius: var(--r-pill);
  }

  .trial-meter-fill.warn {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--ambar), color-mix(in srgb, var(--ambar) 55%, #fff));
  }

  .trial-meter-fill.danger {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--carimbo), color-mix(in srgb, var(--carimbo) 55%, #fff));
  }

  /* Contador do índice: continua sendo pendência, mas em pastilha
     lavada — o círculo vermelho vazado lia como erro de sistema. */
  .nav-count {
    color: var(--carimbo);
    background: var(--carimbo-bg);
    border-color: transparent;
  }

  /* ---------- a folha não recebe nada disso ---------- */
  .print-area .badge.danger,
  .audit-ficha-sheet .badge.danger,
  .print-sheet .badge.danger {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 30%, transparent) 0 2px, transparent 2px 6px);
  }

  .print-area .mk-vencido,
  .audit-ficha-sheet .mk-vencido {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--carimbo) 34%, transparent) 0 2px, transparent 2px 6px);
    border-radius: 2px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .epi-metric-card,
  .ficha-metric-card,
  .training-metric,
  .audit-metrics > div {
    transition: none;
  }

  .epi-metric-card:hover,
  .ficha-metric-card:hover,
  .training-metric:hover,
  .audit-metrics > div:hover {
    transform: none;
  }
}

/* ============================================================
   HARMONIA (3) — os dois indicadores que faltavam
   .summary-item (trocas, alertas, ambientes) e .account-metric
   (conta e admin) somam 50 usos no app: sem eles, metade das
   telas continuava com número serifado e filete preto no topo.
   ============================================================ */
@media screen {
  .summary-item,
  .account-metric,
  .backup-metrics > div {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--regua);
    border-top: 1px solid var(--regua);
    border-radius: var(--r);
    box-shadow: var(--sombra-folha);
    transition:
      transform var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease);
  }

  .summary-item::after,
  .account-metric::after,
  .backup-metrics > div::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--stat-cor, var(--marca-azul)), color-mix(in srgb, var(--stat-cor, var(--marca-azul)) 32%, #fff));
  }

  .summary-item:hover,
  .account-metric:hover,
  .backup-metrics > div:hover {
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
  }

  .summary-item.danger,
  .account-metric.danger {
    --stat-cor: var(--carimbo);
  }

  .summary-item.warn,
  .account-metric.warn {
    --stat-cor: var(--ambar);
  }

  .summary-item.ok,
  .account-metric.ok {
    --stat-cor: var(--selo);
  }

  .summary-item strong,
  .account-metric strong,
  .backup-metrics > div strong {
    font-family: var(--sans);
    font-size: var(--fs-num);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .summary-item span,
  .account-metric span {
    letter-spacing: 0.1em;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .summary-item,
  .account-metric,
  .backup-metrics > div {
    transition: none;
  }

  .summary-item:hover,
  .account-metric:hover,
  .backup-metrics > div:hover {
    transform: none;
  }
}

/* ============================================================
   HARMONIA (4) — a tela vazia recebe quem chega
   O estado vazio é a primeira coisa que um cliente novo vê em
   quase toda tela. Um símbolo antes do texto muda a leitura de
   "está faltando" para "ainda não guardamos nada aqui".
   ============================================================ */
@media screen {
  .empty-icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--marca-azul);
    background: linear-gradient(140deg, var(--oficial-bg), color-mix(in srgb, var(--marca-teal) 12%, #fff));
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca-azul) 12%, transparent);
  }

  .empty-icone svg {
    width: 21px;
    height: 21px;
  }
}

@media print {
  .empty-icone {
    display: none !important;
  }
}

/* ============================================================
   HARMONIA (5) — a portaria
   A tela de acesso é a primeira impressão do produto e estava
   com régua preta de formulário por cima da arte da marca.
   ============================================================ */
@media screen {
  .login-panel,
  .login-content-right .login-home-panel {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }

  .login-panel-header {
    border-bottom: 1px solid var(--regua);
  }

  .login-panel-header h2 {
    color: var(--marca-navy);
  }

  /* Cada porta de entrada responde ao ponteiro: sem isso, as três
     opções pareciam três linhas de texto, e não três botões. */
  .login-choice,
  .login-home-panel > button,
  .login-home-panel > a {
    border-radius: var(--r-sm);
    transition:
      background-color var(--dur-2) var(--ease),
      transform var(--dur-2) var(--ease);
  }

  .login-choice:hover,
  .login-home-panel > button:hover,
  .login-home-panel > a:hover {
    background: var(--oficial-bg);
    transform: translateX(3px);
  }

  .login-choice:hover strong,
  .login-choice:hover h3 {
    color: var(--marca-navy);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .login-choice,
  .login-home-panel > button,
  .login-home-panel > a {
    transition: none;
  }

  .login-choice:hover,
  .login-home-panel > button:hover,
  .login-home-panel > a:hover {
    transform: none;
  }
}

/* ============================================================
   PORTARIA — aviso de sessão vencida
   O cliente não fez nada para ser deslogado: a portaria explica
   o que houve e, sobretudo, que o arquivo dele não sumiu.
   ============================================================ */
@media screen {
  .portaria-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 520px;
    margin: 0 0 14px;
    padding: 14px 16px;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--regua-2);
    border-left: 4px solid var(--ambar);
    border-radius: var(--r-sm);
    box-shadow: var(--sombra-alta);
  }

  .portaria-aviso svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--ambar);
  }

  .portaria-aviso div {
    display: grid;
    gap: 3px;
  }

  .portaria-aviso strong {
    color: var(--marca-navy);
    font-size: var(--fs-md);
  }

  .portaria-aviso span {
    color: var(--tinta-2);
    font-size: var(--fs-sm);
    line-height: 1.45;
  }
}

/* ============================================================
   PORTARIA — o socorro do administrador
   Link discreto: quem sabe a senha nunca precisa reparar nele,
   e quem a perdeu nao pode ficar sem saida.
   ============================================================ */
@media screen {
  .portaria-link {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    color: var(--tinta-3);
    font-size: var(--fs-sm);
    background: transparent;
    border: 0;
  }

  .portaria-link:hover {
    color: var(--marca-navy);
    background: var(--papel-2);
    transform: none;
  }

  .portaria-link svg {
    width: 15px;
    height: 15px;
  }
}

/* ============================================================
   MANUAL DO SISTEMA — a tela XI
   Lê na tela em coluna larga e sai na impressora como apostila.
   As figuras são SVG escrito no app: acompanham o tema, saem no
   papel em preto e branco e não dependem de arquivo de imagem.
   ============================================================ */
.manual-view {
  max-width: 940px;
}

.manual-corpo {
  display: grid;
  gap: 0;
}

/* ---------- índice do próprio manual ---------- */
.manual-indice {
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: var(--regua-media);
}

.manual-indice > .rubrica {
  margin: 0 0 var(--s3);
}

.manual-indice ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.manual-indice-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 5px 6px;
  color: var(--tinta-2);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.manual-indice-item:hover {
  color: var(--marca-navy);
  background: var(--oficial-bg);
}

.manual-indice-num {
  flex: none;
  min-width: 20px;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
}

.manual-indice-titulo {
  font-size: var(--fs-sm);
}

/* ---------- capítulo ---------- */
.manual-capitulo {
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--regua);
}

.manual-capitulo:last-child {
  border-bottom: 0;
}

.manual-capitulo-topo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: var(--s4);
}

.manual-capitulo-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 800;
  background: linear-gradient(135deg, var(--marca-azul), var(--marca-teal));
  border-radius: var(--r-pill);
}

.manual-capitulo-topo h3 {
  margin: 4px 0 2px;
  color: var(--marca-navy);
  font-size: var(--fs-h3);
}

.manual-resumo {
  max-width: 70ch;
  margin: 0;
  color: var(--tinta-3);
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* ---------- passos ---------- */
.manual-passos {
  display: grid;
  gap: 10px;
  max-width: 78ch;
  margin: 0 0 var(--s5);
  padding: 0;
  counter-reset: manual-passo;
  list-style: none;
}

/* O texto do passo vem dentro de um <span>: sem ele, um <b> no meio da frase
   virava item do grid e as palavras empilhavam numa coluna de 24 px. */
.manual-passos li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.manual-passos li > span {
  min-width: 0;
}

.manual-passos li::before {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--marca-azul);
  counter-increment: manual-passo;
  content: counter(manual-passo);
  font-family: var(--mono);
  font-size: var(--fs-rubrica);
  background: var(--oficial-bg);
  border-radius: var(--r-pill);
}

.manual-passos b {
  color: var(--tinta);
}

/* ---------- rodapé do capítulo ---------- */
.manual-capitulo-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.manual-norma {
  margin: 0;
  color: var(--tinta-3);
  font-size: var(--fs-sm);
}

.manual-norma .rubrica {
  margin-right: 6px;
}

/* ---------- figuras ---------- */
.manual-figura {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--papel-2);
  border: 1px solid var(--regua);
  border-radius: var(--r);
}

/* O SVG estica ate a largura da caixa, entao um desenho estreito e alto (a
   folha A4 esquematica) virava um cartaz. O teto de altura segura a escala
   sem deformar: o navegador reduz a largura junto, preservando a proporcao. */
.manual-figura-svg {
  display: block;
  width: 100%;
  max-width: 640px;
  max-height: 300px;
  height: auto;
  margin: 0 auto;
}

.manual-figura-nota {
  max-width: 76ch;
  margin: 12px auto 0;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
}

.manual-figura-nota b {
  color: var(--tinta);
}

.manual-figura figcaption {
  margin-top: 10px;
  padding-top: 8px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  text-align: center;
  border-top: 1px solid var(--regua);
}

/* tinta das figuras */
.fig-caixa rect {
  fill: var(--papel);
  stroke: var(--regua-2);
  stroke-width: 1.2;
}

.fig-oficial rect {
  fill: var(--oficial-bg);
  stroke: var(--oficial);
}

.fig-selo rect {
  fill: var(--selo-bg);
  stroke: var(--selo);
}

.fig-ambar rect {
  fill: var(--ambar-bg);
  stroke: var(--ambar);
}

.fig-carimbo rect {
  fill: var(--carimbo-bg);
  stroke: var(--carimbo);
}

.fig-texto,
.fig-texto-esq {
  fill: var(--tinta);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

.fig-sub,
.fig-sub-esq {
  fill: var(--tinta-3);
  font-family: var(--sans);
  font-size: 11px;
}

.fig-nota {
  fill: var(--tinta-3);
  font-family: var(--sans);
  font-size: 12px;
}

.fig-nota-forte {
  fill: var(--tinta);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
}

.fig-seta {
  stroke: var(--regua-3);
  stroke-width: 1.6;
}

.fig-ponta {
  fill: var(--regua-3);
}

.fig-eixo {
  fill: var(--tinta-3);
  font-family: var(--mono);
  font-size: 11px;
}

.fig-eixo-nome {
  fill: var(--tinta-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* matriz 5x5: mesma rampa da tela de ambientes */
.fig-mtz rect {
  stroke-width: 1;
}
.fig-mtz-1 rect {
  fill: var(--selo-bg);
  stroke: var(--selo);
}
.fig-mtz-2 rect {
  fill: var(--oliva-bg);
  stroke: var(--oliva);
}
.fig-mtz-3 rect {
  fill: var(--ambar-bg);
  stroke: var(--ambar);
}
.fig-mtz-4 rect {
  fill: var(--laranja-bg);
  stroke: var(--laranja);
}
.fig-mtz-5 rect {
  fill: var(--carimbo-bg);
  stroke: var(--carimbo);
}
.fig-mtz-num {
  fill: var(--tinta-2);
  font-family: var(--mono);
  font-size: 11px;
}

/* folha esquemática */
.fig-folha {
  fill: var(--papel);
  stroke: var(--tinta);
  stroke-width: 1.4;
}

.fig-folha-secao {
  fill: var(--papel-3);
}

.fig-folha-chave {
  fill: var(--selo-bg);
  stroke: var(--selo);
  stroke-width: 1;
}

.fig-folha-texto {
  fill: var(--tinta-2);
  font-family: var(--sans);
  font-size: 10px;
}

/* documentos do dossiê */
.fig-doc rect {
  fill: var(--papel);
  stroke: var(--regua-2);
}
.fig-doc circle {
  fill: var(--regua-2);
}
.fig-doc-dentro rect {
  fill: var(--selo-bg);
  stroke: var(--selo);
}
.fig-doc-dentro circle {
  fill: var(--selo);
}
.fig-doc-fora rect {
  stroke-dasharray: 4 3;
}

/* fila de providências */
.fig-fila rect {
  fill: var(--papel);
  stroke: var(--regua-2);
}
.fig-fila.fig-carimbo rect {
  fill: var(--carimbo-bg);
  stroke: var(--carimbo);
}
.fig-fila.fig-ambar rect {
  fill: var(--ambar-bg);
  stroke: var(--ambar);
}
.fig-fila-num {
  fill: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

/* timbre que só existe no papel */
.somente-impressao {
  display: none;
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .manual-capitulo-topo {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .manual-capitulo-num {
    width: 30px;
    height: 30px;
    font-size: var(--fs-sm);
  }

  .manual-figura {
    padding: 10px;
  }
}

/* ---------- papel: o manual vira apostila ---------- */
@media print {
  .manual-view {
    max-width: none;
  }

  .somente-impressao {
    display: block;
  }

  .manual-timbre {
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 2px solid var(--tinta);
  }

  .manual-timbre h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 20pt;
  }

  .manual-timbre p {
    margin: 2mm 0 0;
    color: var(--tinta-3);
    font-family: var(--mono);
    font-size: 9pt;
  }

  /* Capítulo não parte no meio quando cabe inteiro na folha. */
  .manual-capitulo {
    padding: 5mm 0;
    break-inside: avoid;
  }

  .manual-capitulo-num {
    color: var(--tinta);
    background: none;
    border: 1.2px solid var(--tinta);
  }

  .manual-figura {
    background: none;
    break-inside: avoid;
  }

  .manual-passos li {
    font-size: 10pt;
  }

  .manual-capitulo-pe .secondary-button {
    display: none;
  }
}

/* ============================================================
   BARRA LATERAL — quem encolhe é a lista, não a marca
   A .sidebar é flex em coluna com height: 100vh. Numa janela
   baixa (a partir de ~910 px) o total passava da altura e o
   flex espremia TODOS os filhos: a marca caía de 57 px para
   17 px e o texto "ARQUIVO DE CONFORMIDADE" transbordava por
   cima do "ÍNDICE". Marca e rodapé passam a ser inflexíveis;
   a lista de telas é que ganha rolagem própria.
   ============================================================ */
.sidebar > .brand,
.sidebar > .indice-titulo,
.sidebar > .sidebar-footer {
  flex: none;
}

.sidebar > .nav-list {
  flex: 1 1 auto;
  /* min-height: 0 é o que autoriza um filho de flex a rolar em vez
     de estourar o pai; sem isto o overflow-y não tem efeito. */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Barra de rolagem discreta: o índice não pode virar uma calha. */
  scrollbar-width: thin;
}

/* O rodapé grudava no fim com `margin: auto ...`, que dependia da
   sobra de espaço. Com a lista rolando, a sobra some — e a margem
   automática deixa de ser necessária. */
.sidebar > .sidebar-footer {
  margin-top: 0;
}

/* ============================================================
   PROPORÇÃO — o sistema numa tela grande
   Em 1920 o conteúdo esticava até 1480 px e as caixas vazias
   viravam mares de nada: painel de 1400 px com três linhas de
   texto dentro. O limite de largura já existia na fundação
   (--conteudo-max) e nunca tinha sido ligado.
   ============================================================ */
@media screen {
  /* Teto real para monitor grande. 1400 px porque a tabela de
     colaboradores precisa de 1372 px para não rolar na horizontal —
     cortar em 1180 arrumaria a margem e estragaria a tela mais usada. */

  /* Medida de leitura. Linha de 150 caracteres é o que mais faz uma
     tela parecer amadora: o olho perde o começo da linha seguinte. */
  .panel-header p,
  .manual-resumo,
  .hero-leitura,
  .folha-rodape,
  .nota-folha {
    max-width: 78ch;
  }

  .rubrica:not(.aba-folha):not(.indice-titulo) {
    max-width: 92ch;
  }

  /* Caixa vazia deixa de ser um vão: encolhe e centra. */
  .empty-state {
    max-width: 640px;
    min-height: 0;
    margin-inline: auto;
    padding: 26px 24px;
  }

  .empty-titulo {
    font-size: var(--fs-md);
  }

  /* Painel com pouco conteúdo não precisa de altura de cartaz. */
  .panel-body:has(> .empty-state) {
    padding-block: var(--s5);
  }
}

/* ============================================================
   LOGO DA EMPRESA CLIENTE
   O documento é dela: a marca do cliente ocupa o selo do timbre,
   e o "360" fica de reserva para quem ainda não subiu logo.
   ============================================================ */
@media screen {
  .logo-campo .logo-linha,
  .epi-foto-campo .epi-foto-linha {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
  }

  .logo-previa,
  .epi-foto-previa {
    display: grid;
    flex: none;
    place-items: center;
    overflow: hidden;
    width: 72px;
    height: 72px;
    color: var(--tinta-3);
    background: var(--papel-2);
    border: 1px dashed var(--regua-2);
    border-radius: var(--r-sm);
  }

  .logo-previa img,
  .epi-foto-previa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Retrato tem proporção de documento (3x4) e a borda é firme, não tracejada:
     é o mesmo slot que aparece na capa do dossiê e na ficha impressa. E a
     imagem preenche a moldura em vez de caber dentro dela — rosto centralizado
     com tarja branca em volta não parece foto de identificação. */
  .foto-retrato .epi-foto-previa {
    width: 72px;
    height: 96px;
    border-style: solid;
    border-color: var(--regua-2);
    border-radius: 0;
  }

  .foto-retrato .epi-foto-previa img {
    object-fit: cover;
  }

  .logo-acoes,
  .epi-foto-acoes {
    display: grid;
    gap: 6px;
  }

  .logo-acoes .ghost-button,
  .epi-foto-acoes .ghost-button {
    width: auto;
    min-height: 34px;
    padding: 0 12px;
  }

  .campo-nota {
    display: block;
    margin-top: 6px;
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    line-height: 1.4;
  }
}

/* O selo do timbre com a marca do cliente: quadrado, sem borda de círculo,
   e a imagem inteira dentro dele (contain) para não recortar a logo. */
/* O selo do "360" e um circulo; logo de empresa e larga. Forcar a marca do
   cliente num quadrado de 34 px a deixava ilegivel — aqui ela ganha uma faixa
   com a proporcao de assinatura, e `contain` garante que nada e recortado. */
.a4-selo-logo {
  overflow: hidden;
  width: auto;
  min-width: 34px;
  max-width: 132px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
}

.a4-selo-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* ============================================================
   ACESSO — a porta usa o timbre da ficha
   Uma camada só, no lugar das três que se acumularam (foto+coluna,
   hierarquia, vidro). Cada uma desfazia a anterior, e o resultado era
   um tema escuro dentro de um produto que declara color-scheme light.

   A tese não muda: o produto é um arquivo de conformidade. A porta
   deixa de ser tela de marketing e passa a ser a primeira folha do
   arquivo — com o MESMO <header class="a4-timbre"> que sai impresso
   na ficha (as classes de verdade, não uma imitação delas). Quem
   entra reencontra este cabeçalho no papel que o auditor pega.

   Três decisões que este bloco assume, e o porquê:

   1. A folha é cortada pela moldura da tela: sangra em cima e embaixo,
      encostada à direita, sem raio e sem sombra projetada. Cartão tem
      quatro bordas visíveis; folha que saiu da impressora, não. É o que
      separa este desenho do login mais reproduzido da web — painel
      branco arredondado boiando sobre foto escurecida.
   2. Os campos são pautados, não caixas: rubrica em versalete em cima,
      valor em mono sobre um fio. É o vocabulário do formulário
      brasileiro, e é o gesto pelo qual esta tela é lembrada.
   3. O bloco à direita do timbre carrega UMA linha verdadeira — o item
      da norma que obriga a registrar a entrega, no lugar canônico do
      número de formulário. Sem protocolo, sem hash e sem linha de
      assinatura: nada foi emitido nem assinado aqui, e a folha não
      finge que sim. Fingir baratearia a ficha de verdade.
   ============================================================ */
@media screen {
  .login-screen {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 33vw, 520px);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: var(--marca-navy);
    isolation: isolate;
  }

  /* A moldura antiga (borda, gradiente, escala) não existe mais. */
  .login-screen::before {
    display: none;
  }

  /* ---------- a fábrica ----------
     A foto é o mundo onde a norma acontece, não um artefato do documento:
     sem vinheta, sem moldura e sem texto de sistema por cima dela.

     Ela ocupa a coluna que sobra, e NÃO a tela inteira por trás do papel.
     Sangrando por baixo da folha, 520px da imagem ficavam escondidos e o
     navegador tinha de ampliá-la 1,12× para cobrir 1920 de largura —
     cortando 836px na vertical. Numa tela de 1920 isso decapitava o
     trabalhador. Na coluna certa a arte não é ampliada nem uma vez. */
  .login-foto {
    position: relative;
    grid-column: 1;
    z-index: 0;
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--marca-navy);
  }

  .login-foto img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ancorada no canto superior esquerdo, que é onde o trabalhador está na
       arte: assim todo corte sai do chão e do fundo da fábrica, nunca dele.
       Em janela alta e estreita, 30% na horizontal comia o próprio ombro. */
    object-position: left top;
  }

  /* Véu só na base, onde a frase se apoia — e só o suficiente para ela.
     O véu pesado das versões anteriores existia para segurar quatro
     textos brancos; sobrou um, e a fábrica volta a ser vista. */
  .login-foto::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(
      0deg,
      rgba(6, 20, 46, 0.88),
      rgba(6, 20, 46, 0.42) 32%,
      rgba(6, 20, 46, 0) 66%
    );
    pointer-events: none;
  }

  /* A frase do produto é a única coisa que fica sobre a foto, e vai em
     serifada: é a afirmação jurídica do produto, não uma legenda. */
  .login-foto-frase {
    position: absolute;
    bottom: clamp(30px, 7vh, 72px);
    left: clamp(26px, 4.4vw, 76px);
    z-index: 2;
    max-width: 19ch;
    margin: 0;
    color: var(--papel);
    font-family: var(--serif);
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.008em;
    text-wrap: balance;
  }

  .login-foto-frase b {
    display: block;
    margin-top: 0.34em;
    font-weight: 700;
  }

  /* ---------- a folha ---------- */
  .login-folha {
    position: relative;
    z-index: 1;
    grid-column: 2;
    display: grid;
    /* min-content no piso da faixa do meio: com minmax(0, 1fr) a faixa era
       travada na altura da folha e o formulário de cadastro (9 campos)
       transbordava POR CIMA do visto, escrevendo texto sobre texto. Assim
       ela cresce com o conteúdo e a folha rola — e continua esticando para
       empurrar o visto até o pé quando o formulário é curto. */
    grid-template-rows: auto minmax(min-content, 1fr) auto;
    gap: clamp(18px, 2.6vh, 30px);
    min-height: 0;
    padding: clamp(24px, 3.4vh, 42px) clamp(22px, 2vw, 36px);
    background: var(--papel);
    /* Onde a fábrica é clara, branco sobre cinza-claro não faz aresta: o fio
       define onde a folha começa. É borda de página, não enfeite. */
    border-left: 1px solid var(--regua-2);
    overflow-y: auto;
  }

  /* O timbre é o da ficha; aqui só se ajusta o encaixe na grade. */
  .login-folha .a4-timbre {
    margin: 0;
    padding-bottom: 10px;
  }

  .login-folha .a4-emitente h1 {
    margin: 0;
    font: inherit;
  }

  .login-folha .a4-emitente b {
    display: block;
    line-height: 1.25;
  }

  .login-folha .a4-emitente .rubrica {
    display: block;
    margin-top: 2px;
  }

  .login-folha .a4-protocolo {
    align-self: center;
    margin: 0;
  }

  /* ---------- o corpo: as oito vistas viram seções da mesma folha ----------
     Cartão dentro de folha é cartão sobre papel. Todas as vistas do
     #loginContent devolvem .login-panel; aqui elas perdem a carcaça. */
  .login-folha .login-content,
  .login-folha .login-content.login-content-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* O corpo se apoia no meio da folha, entre o timbre e o visto. Alinhado
       no topo, o formulário ocupava o terço de cima e deixava 390px mortos
       embaixo — que é a mesma sobra de que o dono reclamou, mudada de lugar.
       "safe" não é detalhe: centrado puro, a vista de cadastro (979px numa
       folha de 900) transbordava para CIMA e o botão Voltar ficava fora de
       alcance, sem rolagem que chegasse nele. Com safe, quando não cabe o
       alinhamento volta para o topo sozinho. */
    align-content: center;
    align-content: safe center;
    justify-items: stretch;
    gap: 18px;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .login-folha .login-panel,
  .login-folha .login-panel.single,
  .login-folha .login-content-right .login-panel.single,
  .login-folha .login-home-panel,
  .login-folha .login-portaria {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
  }

  .login-folha .login-panel-header {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  .login-folha .login-panel-header > div {
    min-width: 0;
  }

  /* A serifada é a voz do documento: o título de cada vista da folha. */
  .login-folha .login-panel-header h2,
  .login-folha .login-portaria-titulo {
    margin: 0;
    color: var(--tinta);
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .login-folha .login-panel-header p,
  .login-folha .login-portaria-nota {
    margin: 2px 0 0;
    color: var(--tinta-3);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .login-folha .login-panel-body {
    display: grid;
    gap: 18px;
    padding: 0;
  }

  .login-folha form {
    display: grid;
    gap: 18px;
  }

  /* Coluna estreita: formulário de uma coluna só, sempre. */
  .login-folha .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .login-folha .form-actions {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* ---------- campo pautado: rótulo em versalete, valor sobre um fio ----------
     É a assinatura desta tela. Caixa com raio é controle de aplicativo;
     rótulo em versalete sobre um fio é campo de formulário — e o produto
     inteiro existe para preencher formulário. */
  .login-folha .field {
    gap: 4px;
  }

  .login-folha .field > span {
    color: var(--tinta-3);
    font-family: var(--sans);
    font-size: var(--fs-rubrica);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .login-folha .field select {
    min-height: var(--toque);
    padding: 6px 4px;
    color: var(--tinta);
    font-family: var(--mono);
    font-size: var(--fs-md);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--regua-2);
    border-radius: 0;
    box-shadow: none;
    transition:
      border-color var(--dur-2) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  /* A pauta é desenhada com duas camadas de fundo, não com borda: embaixo o
     fio de régua; por cima o fio de tinta, com largura zero. No foco a tinta
     corre da esquerda para a direita — é a linha sendo preenchida. */
  .login-folha .field input,
  .login-folha .field textarea {
    --pauta: var(--regua-2);
    min-height: var(--toque);
    padding: 6px 4px 7px;
    color: var(--tinta);
    font-family: var(--mono);
    font-size: var(--fs-md);
    background-color: transparent;
    background-image:
      linear-gradient(var(--oficial), var(--oficial)),
      linear-gradient(var(--pauta), var(--pauta));
    background-position: left bottom, left bottom;
    background-repeat: no-repeat;
    background-size: 0% 2px, 100% 1px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition:
      background-size var(--dur-3) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  .login-folha .field input::placeholder {
    color: var(--regua-3);
    font-family: var(--mono);
  }

  .login-folha .field input:hover,
  .login-folha .field textarea:hover {
    --pauta: var(--tinta-3);
  }

  .login-folha .field select:hover {
    border-bottom-color: var(--tinta-3);
  }

  /* O foco não é um anel em volta de campo sem caixa: é a linha do
     formulário sendo preenchida — o fio vira tinta e a pauta acende. */
  .login-folha .field input:focus,
  .login-folha .field input:focus-visible,
  .login-folha .field textarea:focus {
    background-color: var(--oficial-bg);
    background-size: 100% 2px, 100% 1px;
    outline: 0;
    box-shadow: none;
  }

  .login-folha .field select:focus {
    background-color: var(--oficial-bg);
    border-bottom: 2px solid var(--oficial);
    outline: 0;
    box-shadow: none;
  }

  .login-folha .check-field {
    align-items: start;
    gap: 10px;
  }

  /* O consentimento é frase, não rótulo de campo: versalete em duas linhas
     não se lê, e é justamente a linha que a pessoa precisa ler antes de
     marcar. Sai a caixa alta e volta a caixa normal. */
  .login-folha .check-field > span {
    color: var(--tinta-2);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
  }

  .login-folha .check-field input[type="checkbox"] {
    min-height: 0;
    padding: 0;
    background-image: none;
    border-bottom: 0;
  }

  /* ---------- ações: tinta chapada, não brilho ----------
     Carimbo é tinta. O gradiente da camada de harmonia é a língua da
     interface; sobre a folha o botão fala a língua do documento. */
  .login-folha .primary-button {
    justify-content: center;
    width: 100%;
    color: var(--papel);
    background: var(--oficial);
    border: 1px solid var(--oficial);
    border-radius: var(--r-sm);
    box-shadow: none;
  }

  .login-folha .primary-button:hover {
    background: var(--marca-navy);
    border-color: var(--marca-navy);
    box-shadow: none;
    transform: none;
  }

  .login-folha .primary-button:hover svg,
  .login-folha .secondary-button:hover svg {
    transform: none;
  }

  /* Na folha o ícone não cresce: a seta de entrar anda para dentro. */
  .login-folha .primary-button:hover svg.lucide-log-in {
    transform: translateX(3px);
  }

  .login-folha .secondary-button {
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--regua-2);
    border-radius: var(--r-sm);
    box-shadow: none;
  }

  .login-folha .secondary-button:hover {
    background: var(--papel-2);
    border-color: var(--tinta-3);
    transform: none;
  }

  /* O carimbo vale na folha também. O :hover daqui zera o transform e
     ganharia do clique se esta regra não viesse depois dele. */
  .login-folha .primary-button:active,
  .login-folha .secondary-button:active {
    transform: translateY(1px);
    transition-duration: 40ms;
  }

  .login-folha .primary-button:active {
    box-shadow: none;
  }

  .login-folha .table-action {
    flex: none;
    color: var(--tinta-3);
    background: transparent;
    border: 1px solid var(--regua-2);
    border-radius: var(--r-sm);
  }

  .login-folha .table-action:hover {
    color: var(--tinta);
    background: var(--papel-2);
    border-color: var(--tinta-3);
  }

  /* ---------- a folha sai da impressora ----------
     O único movimento do sistema que ninguém provocou: a foto assenta, o fio
     do timbre é impresso de ponta a ponta e as pautas correm na ordem em que
     se preenche. Fill "backwards", não "both": terminada a entrada, o campo
     volta a obedecer ao foco — com "both" o último quadro congelaria a
     largura da pauta e o fio de tinta nunca mais correria. */
  @keyframes foto-assenta {
    from {
      opacity: 0.55;
      transform: scale(1.045);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes pauta-corre {
    from {
      background-size: 0% 2px, 0% 1px;
    }
    to {
      background-size: 0% 2px, 100% 1px;
    }
  }

  .login-foto img {
    animation: foto-assenta 1600ms var(--ease) backwards;
  }

  .login-folha .a4-timbre {
    position: relative;
    border-bottom-color: transparent;
    animation: fade-up var(--dur-3) var(--ease) backwards;
  }

  .login-folha .a4-timbre::after {
    position: absolute;
    right: 0;
    bottom: -1.5px;
    left: 0;
    height: 1.5px;
    content: "";
    background: var(--tinta);
    transform-origin: left center;
    animation: meter-sweep 720ms var(--ease) var(--dur-2) backwards;
  }

  .login-folha .login-portaria-titulo,
  .login-folha .login-panel-header {
    animation: fade-up var(--dur-3) var(--ease) var(--dur-3) backwards;
  }

  .login-folha .form-grid > .field input,
  .login-folha .form-grid > .field textarea {
    animation: pauta-corre 560ms var(--ease) var(--dur-3) backwards;
  }

  .login-folha .form-grid > .field:nth-child(2) input {
    animation-delay: var(--dur-3);
  }

  .login-folha .form-grid > .field:nth-child(3) input {
    animation-delay: 520ms;
  }

  .login-folha .form-grid > .field:nth-child(n + 4) input {
    animation-delay: 600ms;
  }

  .login-folha .form-actions {
    animation: fade-up var(--dur-3) var(--ease) 560ms backwards;
  }

  /* ---------- as duas linhas de serviço da porta ---------- */
  .login-abrir {
    margin: 0;
    color: var(--tinta-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .login-abrir button {
    padding: 0;
    color: var(--oficial);
    font: inherit;
    font-weight: 700;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
  }

  .login-abrir button:hover {
    color: var(--marca-navy);
  }

  /* Administração é porta de serviço: linha, não caixa. */
  .login-servico {
    margin: 0;
  }

  .login-servico button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 6px 8px 6px 0;
    color: var(--tinta-3);
    font: inherit;
    font-size: var(--fs-rubrica);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease);
  }

  .login-servico button:hover {
    color: var(--tinta);
  }

  .login-servico svg {
    width: 14px;
    height: 14px;
  }

  /* ---------- o pé: visto do emissor, em vez de três textinhos soltos ----------
     Eram três frases empilhadas que perdiam força e deixavam vazio
     embaixo. Viram o fecho de um formulário: rótulo à esquerda, o que
     ele declara à direita — e só o que é verificável. Sem linha de
     assinatura: ninguém assina uma tela de entrada. */
  .login-visto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 16px;
    align-items: baseline;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--regua);
  }

  .login-visto p {
    margin: 0;
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    line-height: 1.5;
  }

  .login-visto .rubrica {
    white-space: nowrap;
  }

  /* ---------- avisos dentro da folha ---------- */
  .login-folha .portaria-aviso,
  .login-folha .trial-box {
    border-radius: var(--r-folha);
  }

  /* ---------- telas estreitas: a foto vira faixa, a folha continua folha ----------
     No celular a folha ocupa a largura toda e rola. A frase continua
     sobre a foto, menor: é a única coisa que a faixa precisa dizer. */
  @media (max-width: 1200px) {
    .login-screen {
      position: absolute;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: clamp(150px, 23vh, 230px) minmax(0, 1fr);
      min-height: 100dvh;
    }

    .login-foto {
      position: relative;
      grid-row: 1;
    }

    .login-foto::after {
      background: linear-gradient(
        0deg,
        rgba(6, 20, 46, 0.88),
        rgba(6, 20, 46, 0.3) 52%,
        rgba(6, 20, 46, 0) 100%
      );
    }

    .login-foto img {
      /* Na faixa curta, ancorar mais alto: em 40% a faixa começava no meio
         do rosto e cortava a cabeça do trabalhador. */
      object-position: 32% 24%;
    }

    /* O número do formulário não desce para uma linha própria alinhada à
       esquerda: ele mora no canto superior direito, que é o lugar dele. */
    .login-folha .a4-timbre {
      flex-wrap: nowrap;
    }

    .login-folha .a4-protocolo {
      text-align: right;
    }

    .login-foto-frase {
      right: 20px;
      bottom: 16px;
      left: 20px;
      max-width: none;
      font-size: clamp(19px, 5vw, 25px);
    }

    .login-foto-frase b {
      display: inline;
      margin: 0;
    }

    .login-folha {
      grid-row: 2;
      grid-column: 1;
      padding: 22px 18px 28px;
    }
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .login-foto img,
  .login-folha .a4-timbre,
  .login-folha .a4-timbre::after,
  .login-folha .login-portaria-titulo,
  .login-folha .login-panel-header,
  .login-folha .form-grid > .field input,
  .login-folha .form-grid > .field textarea,
  .login-folha .form-actions {
    animation: none;
  }

  .login-folha .field input,
  .login-folha .field textarea {
    transition: none;
  }
}

@media print {
  .login-screen {
    display: none !important;
  }
}


/* ============================================================
   A TABELA CONSOLIDADA CABE NA FOLHA
   O dono imprimiu o relatório e voltou com páginas cortadas: das dez
   colunas do quadro consolidado só apareciam três e meia, e o resto era
   fatiado pela margem direita.

   A causa não era a impressora. Na tela a tabela mede 2110px e rola na
   horizontal — `.table-wrap { overflow-x: auto }` com
   `white-space: nowrap` em toda célula. No papel não existe rolagem: o
   que não cabe some. E as regras de impressão que já consertavam a folha
   da ficha (`.audit-ficha-sheet table { table-layout: fixed }`) nunca
   alcançavam este quadro, porque ele é `.table-wrap` puro — nunca
   recebeu a classe `.audit-table`.

   Largura útil do A4 com margem de 10mm: 718px. A tabela passa a se
   ajustar a ela, quebrando texto em vez de esticar a folha.
   ============================================================ */
@media print {
  .print-area .table-wrap,
  .print-area .audit-table {
    max-width: 100%;
    overflow: visible;
    border: 0;
  }

  /* Paisagem foi tentada e descartada: a página vira mesmo com @page nomeada,
     mas a MEDIDA do conteúdo continua a do retrato, e a tabela usava dois
     terços da folha larga — corte de novo, só que numa folha deitada. Resolver
     de verdade é reduzir as colunas, e isso é redesenho, não regra de CSS. */
  .print-area .table-wrap table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 8pt;
  }

  /* Data e prazo nunca quebram: "09/09/20 26" não é data. */
  .print-area .relatorio-linhas td:nth-child(8),
  .print-area .relatorio-linhas th:nth-child(8) {
    white-space: nowrap;
  }

  /* O rótulo da coluna quebrava em "PRAZ O" e "STATU S": a culpa era do
     entrelinhamento de 0.12em da tela somado a 8pt. Menor e mais junto, cabe. */
  .print-area .table-wrap th {
    font-size: 7pt;
    letter-spacing: 0.02em;
  }

  .print-area .table-wrap th,
  .print-area .table-wrap td {
    padding: 3.5pt 4pt;
    /* O nowrap é o que estica a tabela: no papel a célula quebra. Preferindo
       o espaço entre palavras — "anywhere" partia até o cabeçalho curto. Uma
       palavra mais larga que a própria coluna ainda parte, porque a
       alternativa é ela sair da folha; onde isso ainda acontece, a resposta é
       menos coluna, não mais regra de quebra. */
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    vertical-align: top;
  }

  /* Larguras declaradas: sem elas o layout fixo divide as dez colunas em
     partes iguais e a observação (texto longo) fica do tamanho do selo. */
  .print-area .relatorio-linhas th:nth-child(1),
  .print-area .relatorio-linhas td:nth-child(1) { width: 10%; }
  .print-area .relatorio-linhas th:nth-child(2),
  .print-area .relatorio-linhas td:nth-child(2) { width: 8%; }
  .print-area .relatorio-linhas th:nth-child(3),
  .print-area .relatorio-linhas td:nth-child(3) { width: 6%; }
  .print-area .relatorio-linhas th:nth-child(4),
  .print-area .relatorio-linhas td:nth-child(4) { width: 9%; }
  .print-area .relatorio-linhas th:nth-child(5),
  .print-area .relatorio-linhas td:nth-child(5) { width: 13%; }
  .print-area .relatorio-linhas th:nth-child(6),
  .print-area .relatorio-linhas td:nth-child(6) { width: 13%; }
  .print-area .relatorio-linhas th:nth-child(7),
  .print-area .relatorio-linhas td:nth-child(7) { width: 9%; }
  .print-area .relatorio-linhas th:nth-child(8),
  .print-area .relatorio-linhas td:nth-child(8) { width: 8%; }
  .print-area .relatorio-linhas th:nth-child(9),
  .print-area .relatorio-linhas td:nth-child(9) { width: 8%; }
  .print-area .relatorio-linhas th:nth-child(10),
  .print-area .relatorio-linhas td:nth-child(10) { width: 16%; }

  /* O texto do item não pode sair reticente no papel: em "Colabora…" o
     auditor não sabe o que foi entregue. */
  .print-area .table-wrap .cell-main strong,
  .print-area .table-wrap .cell-main span {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .print-area .table-wrap .cell-main strong {
    font-size: 8.5pt;
  }

  .print-area .table-wrap .cell-main span,
  .print-area .table-wrap td .mono,
  .print-area .table-wrap td small {
    font-size: 7.5pt;
  }

  /* Selo de situação: na tela é pastilha hachurada com ícone; no papel a
     pastilha quebrava em seis linhas dentro da própria borda. Vira o que
     um formulário usa — texto em versalete, sem cápsula e sem ícone. */
  .print-area .table-wrap .badge {
    display: inline;
    padding: 0;
    color: var(--tinta);
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* O glifo FICA. Ele é o que distingue crítico de atenção quando a cor sai
     da folha — e sai, porque o auditor fotocopia. Apagá-lo junto com a
     cápsula, como esta regra fazia antes, achatava crítico, atenção e em dia
     no mesmo texto preto: o papel perdia a severidade que a tela mostra. */
  .print-area .table-wrap .badge::before {
    /* Na tela o glifo mora num disco de 16px; a 7pt o disco ficaria maior que
       a palavra. No papel ele é só o sinal, em tinta. */
    display: inline;
    width: auto;
    height: auto;
    margin-right: 2pt;
    color: var(--tinta);
    font-size: 7pt;
    font-weight: 700;
    background: none;
    border-radius: 0;
  }

  .print-area .table-wrap .badge.danger,
  .print-area .table-wrap .badge.warn {
    text-transform: uppercase;
  }

  .print-area .table-wrap .badge::after {
    display: none !important;
  }

  .print-area .table-wrap .badge svg {
    display: none !important;
  }

  /* A primeira ficha do maço colava no rabo da tabela consolidada: a folha
     tem break-after e nunca teve break-before — não havia um único
     break-before em todo o styles.css. Cada ficha começa em folha nova. */
  .audit-ficha-sheet {
    break-before: page;
    page-break-before: always;
  }

  .audit-ficha-sheet:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }

  /* O cabeçalho se repete em toda página e a linha não parte no meio:
     sem isso a página 2 começa sem dizer o que é cada coluna. */
  .print-area thead {
    display: table-header-group;
  }

  .print-area tfoot {
    display: table-footer-group;
  }

  .print-area tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Os cartões de número: a grade da tela transbordava a margem e cortava
     a segunda fileira ao meio. Quatro por linha cabem no A4. */
  .print-area .summary-strip,
  .print-area .audit-metrics,
  .print-area .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6pt;
  }

  .print-area .summary-strip > *,
  .print-area .audit-metrics > *,
  .print-area .stat-grid > * {
    min-width: 0;
    break-inside: avoid;
  }

  /* Nenhum bloco do relatório pode ser mais largo que a folha. Sem overflow
     hidden: recortar é o defeito que se está consertando — o que não couber
     tem de aparecer quebrado, nunca sumir. */
  .print-area,
  .print-area .panel,
  .print-area .panel-body,
  .print-area .panel-header,
  .print-area .audit-hero {
    max-width: 100%;
  }
}


/* ============================================================
   VALIDADE DO CA EM LOTE
   Depois de carregar um PGR o catálogo fica com dezenas de CAs sem
   vencimento — o documento traz o número, nunca a data. Preencher um a
   um custa uma navegação por item; aqui é uma folha só, com o número do
   CA à vista para conferir no Consulta CA.
   ============================================================ */
/* Fila de fotos esperando confirmação. Não é cartão flutuante: é linha de
   conferência, com a tinta da margem verde quando o sistema já reconheceu o
   equipamento pelo CA no nome do arquivo. Cinza = ninguém disse ainda de quem
   é aquela foto, e sem isso ela não entra no catálogo. */
/* Uma linha por cargo, com o ambiente à direita. Escolher no select já vincula
   todo mundo daquele cargo: o botão separado seria um clique a mais para uma
   decisão que já foi tomada no momento da escolha. */
.vinculo-ambiente {
  display: grid;
  gap: var(--s2);
}

.vinculo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 13rem) minmax(130px, 10rem);
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--papel-2);
  border: 1px solid var(--regua);
  border-left: 2px solid var(--ambar);
  border-radius: var(--r-folha);
}

@media (max-width: 640px) {
  .vinculo-linha {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O link de assinatura aparece uma vez só, e a tela precisa deixar isso óbvio:
   moldura de papel, QR grande o bastante para a câmera pegar de longe, e o
   endereço em mono para quem preferir digitar. */
.assina-link {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-radius: var(--r-folha);
  text-align: center;
}

.assina-qr svg {
  display: block;
  width: 200px;
  height: 200px;
  background: var(--papel);
  padding: var(--s2);
  border: 1px solid var(--regua-2);
}

.assina-url {
  overflow-wrap: anywhere;
  max-width: 34rem;
}

.linha-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.foto-lote {
  display: grid;
  gap: var(--s2);
}

.foto-lote-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--papel-2);
  border: 1px solid var(--regua);
  border-left: 2px solid var(--regua-2);
  border-radius: var(--r-folha);
}

.foto-lote-item.casada {
  border-left-color: var(--selo);
}

.foto-lote-previa {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 48px;
  height: 48px;
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r-folha);
}

.foto-lote-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-lote-dados {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.foto-lote-dados em {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-style: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .foto-lote-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .foto-lote-item .table-action {
    grid-column: 2;
    justify-self: end;
  }
}

.validade-lote {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s3) var(--s4);
}

.validade-lote-item {
  gap: 2px;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--regua);
}

/* Nome, número do CA, campo e resposta do cadastro alinhados entre as colunas,
   mesmo quando um nome ocupa duas linhas e o vizinho ocupa uma. Sem isto os
   campos de data ficam em alturas diferentes na mesma fila — e uma folha de
   conferência com pauta torta não parece formulário, parece rascunho.
   Onde subgrid não existe, cai no empilhamento de antes, que continua legível. */
@supports (grid-template-rows: subgrid) {
  .validade-lote-item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

.validade-lote-item > span {
  color: var(--tinta);
  font-size: var(--fs-body);
  font-weight: 600;
}

.validade-lote-item em {
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* O que o cadastro do MTE respondeu, embaixo do campo. Cinza e miúdo porque é
   conferência, não é o dado que se preenche — a data no campo é que manda.
   Tinta de carimbo só nos dois casos em que a resposta contradiz o catálogo:
   CA vencido, ou número que não existe no cadastro. */
.validade-lote-oficial {
  display: block;
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
  line-height: 1.35;
}

.validade-lote-oficial.ja-vencido,
.validade-lote-oficial.nao-consta {
  color: var(--carimbo);
  font-weight: 600;
}


/* ============================================================
   CARGO E O KIT DELE
   O cargo mora junto dos ambientes porque é onde o PGR o põe: a seção
   11 se chama "AMBIENTES, CARGOS E INVENTÁRIO DE RISCOS". O detalhe
   abre embaixo da lista, como a folha aberta sobre a pilha.
   ============================================================ */
.cargo-detalhe {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  padding: var(--s5);
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r-folha);
}

.cargo-detalhe-topo {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--regua-2);
}

.cargo-detalhe-topo h3 {
  margin: 2px 0 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-h3);
}

.cargo-bloco {
  display: grid;
  gap: var(--s2);
}

.cargo-riscos {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: var(--s5);
  color: var(--tinta-2);
  font-size: var(--fs-sm);
}

.cargo-add {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--regua);
}

.cargo-add .field {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .cargo-add {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================================================
   FICHA DE PAPEL NO DOSSIÊ
   Empresa que já existia chega com anos de folha assinada a caneta. Ela
   fica ao lado do documento que o sistema emite, e não disfarçada de
   documento digital: o selo violeta diz "Papel" e o hash prova que o
   arquivo guardado é o mesmo que subiu.
   ============================================================ */
.papel-bloco {
  display: grid;
  gap: var(--s2);
  margin: var(--s5) 0;
  padding: var(--s4);
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r-folha);
}

.papel-lista {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s1);
}

.papel-item {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--papel);
  border: 1px solid var(--regua);
  border-radius: var(--r-folha);
}

.papel-item .cell-main {
  flex: 1 1 auto;
  min-width: 0;
}

.papel-envio {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--regua);
}

.papel-envio .field {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .papel-envio {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ASO no dossiê: o formulário vem logo abaixo do histórico de atestados, e sem
   folga os rótulos encostavam no fio de baixo da tabela. */
.hazard-panel .aso-form {
  margin-top: var(--s4);
}

/* Timbre que a tela leva para o papel (relatórios, trocas): logo da empresa. */
@media print {
  .impressao-timbre.somente-impressao {
    display: flex;
    margin: 0 0 6mm;
  }
}

/* Página do equipamento: o formulário sozinho, na largura do conteúdo. */
.epi-edicao-pagina #epiFormPanel .panel-header {
  align-items: center;
}

/* Quem está operando: faixa no topo do conteúdo até a pessoa se identificar. */
.operador-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--seguranca-bg, #fdf6dd);
  border: 1px solid var(--seguranca);
  border-radius: var(--r-folha);
}

.operador-aviso label {
  display: grid;
  flex: 1 1 320px;
  gap: var(--s2);
  font-size: var(--fs-sm);
}

.operador-aviso input {
  min-height: var(--ctrl-h);
  padding: 0 var(--s3);
  border: 1px solid var(--regua-2);
  border-radius: var(--r-folha);
  font: inherit;
}

.conta-operador span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Página do equipamento: excluir fica longe do salvar. */
.epi-edicao-pagina .form-actions .epi-excluir {
  margin-right: auto;
}

.table-wrap.historico-tabela table {
  width: 100%;
  min-width: 0;
}

.table-wrap.historico-tabela th,
.table-wrap.historico-tabela td {
  white-space: normal;
  vertical-align: top;
}

.table-wrap.historico-tabela td:first-child {
  white-space: nowrap;
}

.historico-mudanca {
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
}

.historico-aparelho {
  display: block;
  color: var(--tinta-3);
  font-size: var(--fs-rubrica);
}

/* Usuários da empresa (tela Conta). */
.usuarios-card .usuarios-perfis {
  margin-bottom: var(--s4);
}

.table-wrap.usuarios-tabela table {
  width: 100%;
  min-width: 0;
}

.table-wrap.usuarios-tabela th,
.table-wrap.usuarios-tabela td {
  white-space: normal;
  vertical-align: top;
}

.usuarios-tabela .row-actions {
  flex-wrap: wrap;
  gap: var(--s2);
}

.usuarios-senha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s2);
  margin-top: var(--s3);
}

.usuarios-novo {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--regua);
}

.usuarios-novo h3 {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
}

.operador-escolha {
  display: grid;
  flex: 1 1 100%;
  gap: var(--s2);
  font-size: var(--fs-sm);
}

.operador-escolha .row-actions {
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Diálogo de ação crítica: substitui o window.confirm nas operações que
   trocam o arquivo inteiro da empresa (restaurar, recarregar demonstração). */
.dialogo-critico {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: var(--r-folha);
  box-shadow: var(--shadow-lg);
}

.dialogo-critico::backdrop {
  background: rgba(16, 29, 44, 0.55);
}

.dialogo-critico-form {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
}

.dialogo-critico-form h2 {
  margin: 0;
  font-family: var(--serif);
}

.dialogo-critico-form > p {
  margin: 0;
}

.dialogo-critico-form .rubrica {
  color: var(--carimbo);
}

.dialogo-critico-arquivo {
  padding: var(--s2) var(--s3);
  background: var(--papel-2);
  border: 1px solid var(--regua-2);
  overflow-wrap: anywhere;
}

.dialogo-critico-impacto {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
}

.dialogo-critico-erro {
  color: var(--carimbo);
  font-weight: 600;
}

.dialogo-critico .danger-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   FUNDAÇÃO 1-B — DESIGN SYSTEM E SHELL RESPONSIVO CORPORATIVO
   Uma camada só, no fim do arquivo, para vencer a cascata das
   camadas anteriores sem renomear classe nenhuma. Tudo aqui deriva
   dos tokens semânticos declarados em :root (--space-*, --font-*,
   --radius-*, --shadow-*, --color-*, --z-*, --dur-*).

   O que muda de verdade:
   1. o índice lateral tem três estados (expandido, compacto,
      gaveta), decididos por data-indice no #appShell;
   2. o timbre vira um cabeçalho de 64 px com busca, ação principal,
      situação do acesso e menu do usuário;
   3. botões, campos, selos, painéis, KPIs, tabelas, diálogos e
      avisos passam a ter um desenho só, com estados completos;
   4. quatro faixas de largura: ≤ 640, 641–900, 901–1200, > 1200.
   A FOLHA (.print-area, .audit-ficha-sheet, .print-sheet, @media
   print) continua fora de tudo isto.
   ============================================================ */
@media screen {
  /* ---------- 0. A MESA, SEM TEXTURA ---------- */
  body {
    background-color: var(--color-bg);
    background-image: none;
  }

  /* Entrada da tela: uma vez, curta. Nada escalonado. */
  .app-shell,
  .sidebar {
    animation: none;
  }

  .vista-nova .view > *,
  .vista-nova .stats-grid > .stat-card {
    animation: fade-up var(--dur-3) var(--ease) both;
  }

  .vista-nova .view > *:nth-child(n),
  .vista-nova .stats-grid > .stat-card:nth-child(n) {
    animation-delay: 0ms;
  }

  /* ---------- 1. SHELL: GRADE E ÍNDICE ---------- */
  .app-shell {
    display: grid;
    grid-template-columns: var(--indice) minmax(0, 1fr);
    min-height: 100vh;
  }

  .app-shell[data-indice="compacto"] {
    grid-template-columns: var(--indice-compacto) minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-4) 0;
    color: var(--color-text);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    overflow: hidden;
  }

  .brand {
    flex: none;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    min-height: 44px;
    margin: 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .brand::after {
    content: none;
  }

  .brand-mark {
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-text);
    border-radius: 50%;
    box-shadow:
      inset 0 0 0 2.5px var(--color-surface),
      inset 0 0 0 3.5px var(--color-text);
  }

  .brand strong {
    color: var(--color-primary-strong);
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .brand span {
    color: var(--color-text-3);
  }

  .indice-titulo {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0 var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-list {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 2px;
    min-height: 0;
    padding: 0 var(--space-2) var(--space-2);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--toque);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
    transform: none;
    transition:
      background-color var(--dur-2) var(--ease),
      color var(--dur-2) var(--ease);
  }

  .nav-item > i,
  .nav-item > svg {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-text-3);
    animation: none;
  }

  .nav-num {
    flex: none;
    width: 26px;
    color: var(--color-text-2);
    font-family: var(--serif);
    font-size: var(--fs-rubrica);
  }

  .nav-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--serif);
    font-size: var(--fs-md);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-leader {
    flex: 1 1 8px;
    min-width: 8px;
    border-bottom: 1px dotted var(--color-border-2);
    transform: translateY(-4px);
  }

  .nav-count {
    flex: none;
    border-radius: var(--radius-sm);
  }

  .nav-item:hover {
    color: var(--color-text);
    background: var(--color-surface-3);
    box-shadow: none;
    transform: none;
  }

  .nav-item.active {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    box-shadow: none;
    transform: none;
  }

  .nav-item.active::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 60%;
    content: "";
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    transform: translateY(-50%);
  }

  .nav-item.active .nav-label {
    font-weight: 700;
  }

  .nav-item:hover > svg,
  .nav-item.active > svg {
    color: var(--color-primary);
  }

  .nav-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    box-shadow: none;
  }

  /* Pé do índice: recolher/expandir (só no desktop). */
  .indice-pe {
    flex: none;
    margin: auto var(--space-2) 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .indice-recolher {
    width: 100%;
    justify-content: flex-start;
    min-height: 40px;
    color: var(--color-text-2);
  }

  .indice-recolher svg {
    transition: transform var(--dur-2) var(--ease);
  }

  .app-shell[data-indice="compacto"] .indice-recolher svg {
    transform: rotate(180deg);
  }

  .sidebar .indice-fechar,
  .topbar .menu-hamburguer,
  .app-shell .indice-fundo,
  .topbar .busca-abrir {
    display: none;
  }

  /* Compacto: só o ícone, com o rótulo em balão ao passar o ponteiro ou o foco. */
  .app-shell[data-indice="compacto"] .sidebar,
  .app-shell[data-indice="compacto"] .nav-list {
    overflow: visible;
  }

  .app-shell[data-indice="compacto"] .brand {
    grid-template-columns: 36px;
    justify-content: center;
    margin: 0 auto;
    padding: 0 0 var(--space-3);
    border-bottom-color: transparent;
  }

  .app-shell[data-indice="compacto"] .brand > div,
  .app-shell[data-indice="compacto"] .indice-titulo,
  .app-shell[data-indice="compacto"] .nav-num,
  .app-shell[data-indice="compacto"] .nav-leader,
  .app-shell[data-indice="compacto"] .nav-label,
  .app-shell[data-indice="compacto"] .indice-recolher span {
    display: none;
  }

  .app-shell[data-indice="compacto"] .nav-item,
  .app-shell[data-indice="compacto"] .indice-recolher {
    justify-content: center;
    padding: var(--space-2);
  }

  .app-shell[data-indice="compacto"] .nav-item .nav-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    padding: 0 3px;
    line-height: 1.3;
  }

  .app-shell[data-indice="compacto"] .nav-item::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: var(--z-sticky);
    padding: 6px 10px;
    color: var(--color-surface);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    content: attr(data-rotulo);
    background: var(--color-text);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity var(--dur-1) var(--ease);
  }

  .app-shell[data-indice="compacto"] .nav-item:is(:hover, :focus-visible)::after {
    opacity: 1;
  }

  /* ---------- 2. CABEÇALHO ---------- */
  .workspace {
    min-width: 0;
    background: transparent;
  }

  .topbar {
    container-type: inline-size;
    container-name: cabecalho;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--header-h);
    padding: var(--space-2) var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    backdrop-filter: none;
  }

  .topbar > * {
    min-width: 0;
    padding-bottom: 0;
  }

  .timbre-id {
    flex: 1 1 120px;
    display: grid;
    gap: 2px;
    min-width: 0;
    max-width: none;
  }

  .timbre-id h1,
  .topbar h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-primary-strong);
    font-size: var(--font-h1);
    line-height: 1.15;
    letter-spacing: 0.005em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .timbre-dados {
    display: block;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-3);
    font-size: var(--fs-rubrica);
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .timbre-dados:empty {
    display: none;
  }

  .timbre-dados span {
    display: inline;
    margin-right: var(--space-3);
  }

  .timbre-razao {
    display: inline;
    max-width: none;
  }

  .topbar-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .comando-barra {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
  }

  .campo-busca {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    width: clamp(160px, 16vw, 280px);
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    transition:
      border-color var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  .campo-busca:focus-within {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
  }

  .campo-busca svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-3);
  }

  .campo-busca input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-sm);
    background: transparent;
    border: 0;
    outline: none;
  }

  .campo-busca input::placeholder {
    color: var(--color-text-3);
  }

  .topbar-actions .field.compact {
    flex: none;
    gap: 0;
    min-width: 0;
    max-width: 200px;
  }

  .topbar-actions .field.compact > span {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }

  .topbar-actions .field.compact select {
    min-height: 40px;
  }

  .topbar-actions .primary-button,
  .topbar-actions .secondary-button {
    flex: none;
    white-space: nowrap;
  }

  .conta-barra {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
  }

  .tenant-status {
    order: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 200px;
  }

  .tenant-status:empty {
    display: none;
  }

  .tenant-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-2);
    font-family: var(--mono);
    font-size: var(--fs-rubrica);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .tenant-line .badge {
    flex: none;
  }

  .tenant-line span:not(.badge) {
    overflow: hidden;
    color: var(--color-text-2);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* O medidor do prazo do acesso não cabe em um cabeçalho de 64 px: a tela
     Conta explica o acesso; aqui fica a pastilha. */
  .topbar .trial-meter {
    display: none;
  }

  .menu-usuario {
    order: 2;
    position: relative;
  }

  .conta-operador {
    width: auto;
    max-width: 200px;
    min-height: 40px;
    padding: 0 var(--space-2) 0 var(--space-3);
  }

  .conta-operador > span {
    overflow: hidden;
    max-width: 140px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conta-operador .menu-seta {
    width: 14px;
    height: 14px;
    transition: transform var(--dur-2) var(--ease);
  }

  .conta-operador[aria-expanded="true"] .menu-seta {
    transform: rotate(180deg);
  }

  .menu-lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--z-sticky);
    display: grid;
    gap: 2px;
    min-width: 232px;
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: fade-up var(--dur-2) var(--ease) both;
  }

  .menu-lista [role="menuitem"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .menu-lista [role="menuitem"]:hover,
  .menu-lista [role="menuitem"]:focus-visible {
    color: var(--color-primary-strong);
    background: var(--color-surface-3);
    outline: none;
  }

  .menu-lista [role="menuitem"] svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-text-3);
  }

  .menu-lista hr {
    margin: var(--space-1) 0;
  }

  .menu-lista .menu-sair {
    display: none;
  }

  .conta-sair {
    order: 3;
    width: auto;
    min-height: 40px;
    padding: 0 var(--space-3);
    white-space: nowrap;
  }

  /* O cabeçalho encolhe pela PRÓPRIA largura (o índice expandido ou compacto
     muda o que sobra), não pela janela: primeiro sai o texto da situação do
     acesso, depois o rótulo da ação principal, por fim o nome de quem opera. */
  @container cabecalho (max-width: 1240px) {
    .tenant-line span:not(.badge) {
      display: none;
    }

    .topbar-actions .field.compact {
      max-width: 160px;
    }
  }

  @container cabecalho (max-width: 1100px) {
    .campo-busca {
      width: 160px;
    }
  }

  @container cabecalho (max-width: 1000px) {
    .comando-barra .primary-button span {
      display: none;
    }

    .comando-barra .primary-button {
      width: 44px;
      min-width: 44px;
      padding: 0;
    }
  }

  @container cabecalho (max-width: 900px) {
    .conta-operador > span,
    .conta-operador .menu-seta,
    .conta-sair span {
      display: none;
    }

    .conta-operador,
    .conta-sair {
      width: 44px;
      padding: 0;
    }
  }

  /* ---------- 3. CONTEÚDO ---------- */
  .content {
    width: min(var(--conteudo-max), 100%);
    margin: 0 auto;
    padding: var(--space-8) var(--space-10) var(--space-10);
  }

  .busca-global-slot {
    width: min(var(--conteudo-max), 100%);
    margin: 0 auto;
    padding: 0 var(--space-10);
  }

  .busca-global-slot > .busca-global {
    margin: var(--space-6) 0 0;
  }

  .view {
    gap: var(--space-5);
  }

  /* ---------- 4. BOTÕES ---------- */
  .primary-button,
  .secondary-button,
  .outline-button,
  .danger-button,
  .ghost-button,
  .icon-button,
  .table-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-4);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition:
      background-color var(--dur-2) var(--ease),
      border-color var(--dur-2) var(--ease),
      color var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease);
  }

  .primary-button::after,
  .secondary-button::after,
  .login-choice::after {
    content: none;
  }

  .primary-button svg,
  .secondary-button svg,
  .outline-button svg,
  .danger-button svg,
  .ghost-button svg,
  .icon-button svg,
  .table-action svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: currentColor;
    transform: none;
    transition: none;
  }

  .primary-button:hover svg,
  .secondary-button:hover svg,
  .primary-button:hover svg.lucide-plus,
  .secondary-button:hover svg.lucide-plus {
    transform: none;
  }

  .primary-button {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .primary-button:hover {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    box-shadow: none;
    transform: none;
  }

  .secondary-button {
    color: var(--color-primary-strong);
    background: var(--color-surface);
    border-color: var(--color-border-input);
  }

  .secondary-button:hover {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: none;
    transform: none;
  }

  .outline-button {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
  }

  .outline-button:hover {
    background: var(--color-primary-soft);
  }

  .ghost-button {
    width: auto;
    color: var(--color-text-2);
    background: transparent;
    border-color: transparent;
  }

  .ghost-button:hover {
    color: var(--color-text);
    background: var(--color-surface-3);
    border-color: transparent;
    transform: none;
  }

  .ghost-button svg {
    color: var(--color-text-3);
  }

  .danger-button {
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
  }

  .danger-button:hover {
    color: #fff;
    background: var(--color-danger);
    box-shadow: none;
  }

  .icon-button {
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--color-text-2);
    background: var(--color-surface);
    border-color: var(--color-border-input);
  }

  .table-action {
    min-height: 32px;
    padding: 0 var(--space-2);
    color: var(--color-text-2);
    font-size: var(--fs-sm);
    background: var(--color-surface);
    border-color: var(--color-border-2);
  }

  .icon-button:hover,
  .table-action:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
  }

  .btn--sm {
    min-height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
  }

  .btn--lg {
    min-height: var(--toque);
    padding: 0 var(--space-5);
  }

  /* Estados. O clique afunda 1 px, como carimbo; desabilitado esmaece e
     avisa pelo cursor; carregando some o rótulo e mostra o giro. */
  .primary-button:active,
  .secondary-button:active,
  .outline-button:active,
  .ghost-button:active,
  .danger-button:active,
  .icon-button:active,
  .table-action:active {
    transform: translateY(1px);
    transition-duration: var(--dur-1);
    box-shadow: none;
  }

  .secondary-button:active,
  .ghost-button:active {
    background: var(--color-surface-3);
    box-shadow: none;
  }

  .primary-button:active {
    box-shadow: none;
  }

  .primary-button:disabled,
  .secondary-button:disabled,
  .outline-button:disabled,
  .ghost-button:disabled,
  .danger-button:disabled,
  .icon-button:disabled,
  .table-action:disabled,
  [aria-disabled="true"]:is(.primary-button, .secondary-button, .outline-button, .ghost-button, .danger-button) {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  .btn--carregando,
  [aria-busy="true"]:is(.primary-button, .secondary-button, .outline-button, .danger-button) {
    color: transparent;
    pointer-events: none;
  }

  .btn--carregando svg,
  [aria-busy="true"]:is(.primary-button, .secondary-button, .outline-button, .danger-button) svg {
    visibility: hidden;
  }

  .btn--carregando::before,
  [aria-busy="true"]:is(.primary-button, .secondary-button, .outline-button, .danger-button)::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    content: "";
    border: 2px solid var(--color-border-2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: girar 700ms linear infinite;
  }

  .primary-button.btn--carregando::before,
  .primary-button[aria-busy="true"]::before {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
  }

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

  /* ---------- 5. CAMPOS ---------- */
  .field {
    gap: var(--space-1);
  }

  .field > span {
    color: var(--color-text-2);
    font-size: var(--fs-rubrica);
    font-weight: 700;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    transform: none;
    transition:
      border-color var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease),
      background-color var(--dur-2) var(--ease);
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--color-text-3);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus,
  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--shadow-focus);
    transform: none;
  }

  .field select {
    padding-right: 34px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6a7c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
  }

  .field.compact select {
    min-height: 40px;
  }

  .field-ajuda,
  .field-erro {
    margin: 0;
    font-size: var(--fs-rubrica);
    line-height: 1.4;
  }

  .field-ajuda {
    color: var(--color-text-3);
  }

  .field-erro {
    color: var(--color-danger);
    font-weight: 600;
  }

  .field-erro:empty,
  .field-erro[hidden] {
    display: none;
  }

  .field [aria-invalid="true"],
  .field.invalido input,
  .field.invalido select,
  .field.invalido textarea {
    border-color: var(--color-danger);
  }

  .field [aria-invalid="true"]:focus,
  .field.invalido :is(input, select, textarea):focus {
    box-shadow: 0 0 0 3px var(--color-danger-bg);
  }

  .field input:disabled,
  .field select:disabled,
  .field textarea:disabled {
    color: var(--color-text-3);
    background: var(--color-surface-2);
    cursor: not-allowed;
  }

  .check-field {
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
  }

  /* ---------- 6. SELOS ---------- */
  .badge {
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px 2px 8px;
    font-size: var(--fs-rubrica);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    text-wrap: nowrap;
    background-color: var(--b-fundo);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--b-tinta) 32%, transparent);
    border-radius: var(--radius-pill);
  }

  .badge.ok {
    --b-tinta: var(--color-ok);
    --b-fundo: var(--color-ok-bg);
  }

  .badge.info {
    --b-tinta: var(--color-info);
    --b-fundo: var(--color-info-bg);
  }

  .badge.warn {
    --b-tinta: var(--color-warn);
    --b-fundo: var(--color-warn-bg);
  }

  .badge.high {
    --b-tinta: var(--color-high);
    --b-fundo: var(--color-high-bg);
  }

  .badge.danger {
    --b-tinta: var(--color-danger);
    --b-fundo: var(--color-danger-bg);
  }

  .badge.violet {
    --b-tinta: var(--oliva);
    --b-fundo: var(--oliva-bg);
  }

  /* Dentro das tabelas e da folha o selo continua quebrando em duas linhas:
     é o que mantém a coluna estreita. Só o selo solto na interface é de uma linha. */
  .table-wrap .badge,
  .print-area .badge,
  .audit-ficha-sheet .badge,
  .print-sheet .badge {
    white-space: normal;
    text-wrap: balance;
  }

  .print-area .badge,
  .audit-ficha-sheet .badge,
  .print-sheet .badge {
    border-radius: 2px;
  }

  /* ---------- 7. PAINEL, ABA E KPI ---------- */
  .panel,
  .audit-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-2) var(--ease);
    animation: none;
  }

  .panel:hover,
  .audit-block:hover {
    border-color: var(--color-border-2);
    box-shadow: var(--shadow-sm);
    transform: none;
  }

  .panel::before {
    content: none;
  }

  .aba-folha {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-5);
    color: var(--color-primary);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .aba-folha::before {
    flex: none;
    width: 6px;
    height: 6px;
    content: "";
    background: var(--color-primary);
    border-radius: 50%;
  }

  .panel-header {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .panel-header h2,
  .panel-header h3 {
    color: var(--color-text);
    font-size: var(--fs-lg);
  }

  .panel-header p {
    color: var(--color-text-3);
    font-size: var(--fs-sm);
  }

  .panel-body {
    padding: var(--space-5);
  }

  /* Um só desenho de indicador: rótulo em versalete, valor em sans forte,
     legenda em uma linha e o tom semântico como filete à esquerda. */
  .stat-card,
  .summary-item,
  .account-metric,
  .epi-metric-card,
  .ficha-metric-card,
  .training-metric,
  .audit-metrics > div {
    position: relative;
    gap: var(--space-1);
    min-height: 0;
    padding: var(--space-4) var(--space-5);
    overflow: visible;
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-top: 1px solid var(--color-border-2);
    border-left: 4px solid var(--stat-cor, var(--color-border-2));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transform: none;
    transition: none;
  }

  .stat-card::before,
  .stat-card::after,
  .epi-metric-card::after,
  .ficha-metric-card::after,
  .training-metric::after,
  .audit-metrics > div::after {
    content: none;
  }

  .stat-card:hover,
  .summary-item:hover,
  .account-metric:hover,
  .epi-metric-card:hover,
  .ficha-metric-card:hover,
  .training-metric:hover,
  .audit-metrics > div:hover {
    border-color: var(--color-border-2);
    border-left-color: var(--stat-cor, var(--color-border-2));
    box-shadow: var(--shadow-sm);
    transform: none;
  }

  .stat-card[data-tone="blue"] {
    --stat-cor: var(--color-primary);
  }

  .stat-card[data-tone="green"] {
    --stat-cor: var(--color-ok);
  }

  .stat-card[data-tone="amber"] {
    --stat-cor: var(--color-warn);
  }

  .stat-card[data-tone="red"] {
    --stat-cor: var(--color-danger);
  }

  .stat-card[data-tone="violet"] {
    --stat-cor: var(--oliva);
  }

  .stat-card[data-tone="neutral"] {
    --stat-cor: var(--color-border-2);
  }

  .stat-topo {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    order: 1;
  }

  .stat-icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--stat-cor, var(--color-primary));
    background: color-mix(in srgb, var(--stat-cor, var(--color-primary)) 12%, #fff);
    border-radius: var(--radius-md);
  }

  .stat-icone svg {
    width: 18px;
    height: 18px;
  }

  .stat-card .stat-label,
  .summary-item span,
  .account-metric span,
  .epi-metric-card span,
  .ficha-metric-card span,
  .training-metric span,
  .audit-metrics > div span {
    color: var(--color-text-3);
    font-size: var(--fs-rubrica);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .stat-card .stat-value,
  .summary-item strong,
  .account-metric strong,
  .epi-metric-card strong,
  .ficha-metric-card strong,
  .training-metric strong,
  .audit-metrics > div strong {
    margin: 0;
    color: var(--color-text);
    font-family: var(--sans);
    font-size: var(--font-metric);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .stat-unidade {
    margin-left: 2px;
    color: var(--color-text-3);
    font-size: var(--fs-lg);
    font-weight: 600;
  }

  .stat-card .stat-detail,
  .summary-item small,
  .account-metric small,
  .epi-metric-card small,
  .ficha-metric-card small,
  .training-metric small,
  .audit-metrics > div small {
    color: var(--color-text-3);
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .stat-card .ticks i {
    height: 8px;
    border-radius: 2px;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
  }

  .epi-metric-card svg,
  .ficha-metric-card svg,
  .training-metric svg {
    color: var(--stat-cor, var(--color-primary));
    background: color-mix(in srgb, var(--stat-cor, var(--color-primary)) 12%, #fff);
    border-radius: var(--radius-md);
  }

  /* ---------- 8. TABELAS ---------- */
  .table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-lg);
    box-shadow: none;
  }

  th,
  .table-wrap table th {
    color: var(--color-text-2);
    font-size: var(--fs-rubrica);
    letter-spacing: 0.04em;
    background: var(--color-surface-2);
  }

  tbody tr:hover td,
  .table-wrap table tbody tr:hover {
    background: var(--color-surface-2);
  }

  .table-action + .table-action {
    margin-left: 0;
  }

  /* Tabela responsiva: colunas com prioridade somem nas faixas estreitas e,
     no celular, cada linha vira um cartão rotulado pela própria célula
     (data-rotulo). É opt-in pela classe .tabela-cartoes. */
  .table-wrap.tabela-cartoes table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .table-wrap.tabela-cartoes.tabela-fixa table {
    table-layout: fixed;
  }

  /* As células quebram entre palavras; uma palavra só se parte quando, sozinha,
     não cabe na coluna (break-word). Com "anywhere" o navegador estreitava
     colunas curtas como "Tipo" até partir "Interno" e "Presencial". */
  .table-wrap.tabela-cartoes .cell-main strong,
  .table-wrap.tabela-cartoes .cell-main span {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .table-wrap.tabela-cartoes table td,
  .table-wrap.tabela-cartoes table th {
    white-space: normal;
    vertical-align: middle;
  }

  .table-wrap.tabela-cartoes table td.tabela-acao,
  .table-wrap.tabela-cartoes table th.tabela-acao {
    text-align: right;
  }

  /* O verbo do destino fica; se não couber em uma linha, quebra em duas. */
  .table-wrap.tabela-cartoes td.tabela-acao .table-action {
    max-width: 100%;
    min-height: 32px;
    padding: var(--space-1) var(--space-2);
    white-space: normal;
    text-align: left;
  }

  .table-wrap.tabela-cartoes .vencimento-dia,
  .table-wrap.tabela-cartoes td .mono {
    font-size: var(--fs-rubrica);
  }

  .table-wrap.tabela-cartoes tbody tr:last-child td {
    border-bottom: 0;
  }

  /* ---------- 9. DIÁLOGOS ---------- */
  dialog {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: auto;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-top: 1px solid var(--color-border-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  dialog::backdrop {
    background: rgba(16, 29, 44, 0.5);
  }

  dialog[open] {
    animation: fade-up var(--dur-3) var(--ease) both;
  }

  .dialogo-cabecalho {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .dialogo-cabecalho h2 {
    margin: 0;
    font-size: var(--fs-h3);
  }

  .dialogo-cabecalho p {
    margin: 0;
    color: var(--color-text-2);
  }

  .dialogo-corpo {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }

  .dialogo-pe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-3) var(--space-5) var(--space-5);
  }

  .dialogo-pe .form-actions {
    margin: 0;
  }

  .dialogo-critico {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--color-border-2);
    border-top: 3px solid var(--color-danger);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .dialogo-critico::backdrop {
    background: rgba(16, 29, 44, 0.5);
  }

  .dialogo-critico-form {
    display: block;
    padding: 0;
  }

  .dialogo-critico-form .rubrica {
    color: var(--color-danger);
  }

  .dialogo-critico-arquivo {
    border-radius: var(--radius-sm);
  }

  dialog.foto-ampliada {
    width: min(760px, calc(100vw - 32px));
  }

  .evento-overlay {
    z-index: var(--z-modal);
  }

  /* ---------- 10. AVISOS, ESTADO VAZIO E TOAST ---------- */
  .aviso,
  .operador-aviso,
  .legal-box-pendencia {
    display: grid;
    gap: var(--space-2) var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    background: var(--color-info-bg);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
  }

  .aviso p,
  .aviso li {
    margin: 0;
  }

  .aviso--ok {
    background: var(--color-ok-bg);
    border-color: color-mix(in srgb, var(--color-ok) 30%, transparent);
    border-left-color: var(--color-ok);
  }

  .aviso--atencao,
  .operador-aviso {
    background: var(--color-warn-bg);
    border-color: color-mix(in srgb, var(--color-warn) 35%, transparent);
    border-left-color: var(--color-warn);
  }

  .aviso--critico,
  .legal-box-pendencia {
    color: var(--color-text);
    background: var(--color-danger-bg);
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    border-left-color: var(--color-danger);
  }

  .legal-box-pendencia b {
    color: var(--color-danger);
  }

  .operador-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .operador-aviso input {
    min-height: 40px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
  }

  .empty-state {
    min-height: 0;
    padding: var(--space-6);
    background: var(--color-surface-2);
    background-image: none;
    border: 1px dashed var(--color-border-2);
    border-radius: var(--radius-lg);
    animation: none;
  }

  .empty-passos li::before {
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
  }

  .toast {
    z-index: var(--z-toast);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    transition:
      opacity var(--dur-2) var(--ease),
      transform var(--dur-2) var(--ease);
  }

  .toast[data-tom="ok"] {
    border-left-color: var(--color-ok);
  }

  .toast[data-tom="erro"] {
    border-left-color: var(--color-danger);
  }

  .aviso-versao {
    z-index: var(--z-toast);
  }

  /* ---------- 11. TIPOGRAFIA ---------- */
  h1 {
    font-size: var(--font-h1);
  }

  h2 {
    font-size: var(--font-h2);
  }

  h3 {
    font-size: var(--font-h3);
  }

  /* ---------- 12. PILOTO — PAINEL DE CONFORMIDADE ----------
     O cartaz em degradê vira o cabeçalho de contexto do arquivo: em papel,
     com a razão social, o CNPJ, a filial e o grau de risco, a leitura
     técnica em uma frase e o aro de conformidade em tinta chapada. */
  .painel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5) var(--space-8);
    align-items: center;
    padding: var(--space-5) var(--space-6);
    overflow: visible;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-left: 4px solid var(--color-primary-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .painel-hero::before {
    content: none;
  }

  .painel-hero[data-tone="risco"] {
    border-left-color: var(--color-danger);
  }

  .painel-hero[data-tone="atencao"] {
    border-left-color: var(--color-warn);
  }

  .painel-hero[data-tone="ok"] {
    border-left-color: var(--color-ok);
  }

  .painel-hero[data-tone="neutro"] {
    border-left-color: var(--color-border-2);
  }

  .hero-texto {
    gap: var(--space-2);
  }

  .hero-saudacao {
    color: var(--color-text-3);
  }

  .hero-saudacao::before {
    background: var(--color-border-2);
  }

  .hero-titulo {
    color: var(--color-text);
    font-size: var(--fs-h2);
  }

  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    color: var(--color-text-3);
    font-size: var(--fs-rubrica);
  }

  .hero-meta b {
    color: var(--color-text-2);
    font-weight: 600;
  }

  .hero-leitura {
    color: var(--color-text-2);
    font-size: var(--fs-md);
  }

  .hero-leitura b {
    color: var(--color-text);
    border-bottom: 0;
  }

  .hero-atalhos {
    margin-top: var(--space-2);
  }

  .painel-hero .primary-button {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
  }

  .painel-hero .primary-button:hover {
    color: #fff;
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
  }

  .painel-hero .secondary-button {
    color: var(--color-primary-strong);
    background: var(--color-surface);
    border-color: var(--color-border-input);
  }

  .painel-hero .secondary-button:hover {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
  }

  .painel-hero :is(.primary-button, .secondary-button):focus-visible {
    outline-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
  }

  .hero-aro {
    gap: var(--space-1);
  }

  .aro-conformidade {
    width: 112px;
    height: 112px;
  }

  .aro-trilho {
    stroke: var(--color-surface-3);
  }

  .aro-marca {
    stroke: var(--aro-cor, var(--color-primary));
    animation: none;
  }

  .aro-conformidade[data-tone="green"] {
    --aro-cor: var(--color-ok);
  }

  .aro-conformidade[data-tone="amber"] {
    --aro-cor: var(--color-warn);
  }

  .aro-conformidade[data-tone="red"] {
    --aro-cor: var(--color-danger);
  }

  .aro-conformidade[data-tone="neutral"] {
    --aro-cor: var(--color-border-2);
  }

  .aro-centro strong {
    color: var(--color-text);
    font-size: var(--font-metric);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .aro-centro strong span {
    color: var(--color-text-3);
    font-size: var(--fs-md);
    opacity: 1;
  }

  .aro-centro small {
    color: var(--color-text-3);
    font-size: var(--fs-rubrica);
    letter-spacing: 0.08em;
  }

  .hero-aro-nota {
    color: var(--color-text-3);
  }

  .hero-aro-nota b {
    color: var(--color-text);
  }

  .passos-preenche {
    background: var(--color-primary);
    animation: none;
  }

  .passos-selo {
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  }

  .painel-duplo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  .painel-lista-pe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
    color: var(--color-text-3);
    font-size: var(--fs-sm);
  }

  .painel-lista-pe p {
    margin: 0;
  }

  .vencimento-dia {
    font-family: var(--mono);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  .vencimento-dia.vencido {
    color: var(--color-danger);
    font-weight: 700;
  }

  .vencimento-dia.aviso {
    color: var(--color-warn);
    font-weight: 700;
  }

  .view-grid.dossie-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  }

  /* Calendário legal: em vez de rolar de lado, os 12 meses quebram em duas
     fileiras de seis (painel estreito) ou três de quatro (celular). */
  .lt-wrap {
    container-type: inline-size;
    overflow-x: hidden;
  }

  .lt-wrap .lt {
    flex-wrap: wrap;
    min-width: 0;
  }

  .lt-wrap .lt-mes {
    flex: 1 0 78px;
    min-width: 0;
  }

  @container (max-width: 960px) {
    .lt-wrap .lt-mes {
      flex: 1 0 16.6667%;
    }

    .lt-wrap .lt-mes:nth-child(6n) .lt-eixo {
      border-right: 1px solid var(--color-border-2);
    }
  }

  @container (max-width: 520px) {
    .lt-wrap .lt-mes {
      flex: 1 0 25%;
    }

    .lt-wrap .lt-mes:nth-child(4n) .lt-eixo {
      border-right: 1px solid var(--color-border-2);
    }
  }

  /* ---------- 12b. TELAS OPERACIONAIS (Etapa 1-C) ----------
     Detalhe de linha da tabela responsiva, chips de filtro, seções de
     formulário e o campo inválido pintado pelo próprio navegador. */
  .tabela-detalhe-botao,
  .tabela-detalhe {
    display: none;
  }

  .tabela-detalhe-botao svg {
    transition: transform var(--dur-2) var(--ease);
  }

  .tabela-detalhe-botao[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .tabela-detalhe td {
    padding: 0 var(--space-4) var(--space-3);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
  }

  .tabela-detalhe-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding-top: var(--space-2);
  }

  .tabela-detalhe-lista div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .tabela-detalhe-lista dt {
    color: var(--color-text-3);
    font-size: var(--fs-rubrica);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tabela-detalhe-lista dd {
    margin: 0;
    font-size: var(--fs-sm);
  }

  /* A tabela responsiva não rola: a coluna presa à direita e o placar deixam
     de ser "sticky" (eram muleta da rolagem lateral). */
  .table-wrap.tabela-cartoes :is(th, td).col-acoes,
  .table-wrap.tabela-cartoes :is(th, td).dossie-placar {
    position: static;
    width: auto;
    min-width: 0;
    box-shadow: none;
  }

  .table-wrap.tabela-cartoes td.col-acoes {
    white-space: nowrap;
  }

  .table-wrap.tabela-cartoes .link-button strong {
    font-size: var(--fs-md);
  }

  /* Na tabela responsiva a linha secundária da célula quebra: é o que deixa
     dez colunas caberem sem rolagem no notebook e no desktop. */
  .table-wrap.tabela-cartoes .cell-main span {
    white-space: normal;
  }

  .filtro-chips {
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
  }

  .filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 36px;
    padding: 0 var(--space-3);
    color: var(--color-text-2);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-pill);
    transition:
      background-color var(--dur-2) var(--ease),
      border-color var(--dur-2) var(--ease),
      color var(--dur-2) var(--ease);
  }

  .filtro-chip:hover {
    background: var(--color-surface-3);
  }

  .filtro-chip.ativo {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: none;
  }

  .vinculo-linha select {
    min-height: 40px;
    padding: var(--space-2) 34px var(--space-2) var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6a7c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
  }

  .vinculo-linha select:disabled {
    color: var(--color-text-3);
    background-color: var(--color-surface-2);
  }

  .form-secao {
    min-width: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
  }

  .form-secao:last-of-type {
    margin-bottom: 0;
  }

  .form-secao > legend {
    width: 100%;
    margin: 0 0 var(--space-3);
    padding: 0 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  /* Cabeçalho de comando das telas (catálogo, fichas): papel com filete,
     como o contexto do painel — sem degradê nem título de cartaz. */
  .epi-command,
  .ficha-command {
    gap: var(--space-4) var(--space-6);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-left: 4px solid var(--color-primary-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .epi-command::after,
  .ficha-command::after {
    content: none;
  }

  .epi-command h2,
  .ficha-command h2 {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--fs-h2);
  }

  .epi-command p,
  .ficha-command p {
    max-width: 78ch;
    margin: 0;
    color: var(--color-text-2);
  }

  .epi-command-actions,
  .ficha-command-actions {
    gap: var(--space-2);
  }

  /* Emissão da ficha: seletor do dossiê e a régua de ações lado a lado; no
     celular a régua desce e cada botão ocupa a linha inteira. */
  .ficha-generator-row {
    gap: var(--space-3);
    align-items: end;
  }

  .ficha-generator-row .row-actions {
    gap: var(--space-2);
  }

  /* Minuta e prévia da folha lado a lado só quando as duas cabem (a folha A4
     precisa de 720 px); senão, uma coluna — sem largura de janela decorada. */
  .view-grid.fichas-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 720px), 1fr));
  }

  /* Selo com ícone (tipo de ocorrência): o ícone substitui o glifo. */
  .badge.badge-icone::before {
    display: none;
  }

  .badge.badge-icone svg {
    flex: none;
    width: 13px;
    height: 13px;
  }

  /* Folha de ocorrência (troca, devolução, dano, extravio) no padrão de
     diálogo: centrada, dentro da janela, com rolagem interna; no celular sobe
     como folha inferior. O fundo não fecha ao clique — preenchimento em curso. */
  .evento-overlay {
    z-index: var(--z-modal);
    align-items: center;
    padding: var(--space-4);
    background: rgba(16, 29, 44, 0.5);
  }

  .evento-caixa {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: fade-up var(--dur-3) var(--ease) both;
  }

  .evento-caixa .panel-header {
    flex: none;
  }

  .evento-caixa .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  /* A régua de ações fica presa ao pé da folha de ocorrência: com a rolagem
     interna do celular, "Gravar" e "Cancelar" nunca somem. */
  .evento-caixa .row-actions {
    position: sticky;
    bottom: 0;
    justify-content: flex-end;
    margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
    padding: var(--space-3) var(--space-5) var(--space-5);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }

  /* Fila de providências: cada linha é uma ordem de trabalho — criticidade
     e tipo em selos, o que fazer em serifada, prazo em mono e a ação sempre
     visível como botão (o clique continua valendo na linha inteira). */
  .alert-list {
    gap: var(--space-2);
  }

  .alert-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-2);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .alert-row[data-severity="warn"] {
    background: var(--color-surface);
    border-left-color: var(--color-warn);
  }

  .alert-row[data-severity="danger"] {
    background: var(--color-surface);
    border-left-color: var(--color-danger);
  }

  .alert-row:hover {
    border-color: var(--color-border-2);
    box-shadow: var(--shadow-sm);
    transform: none;
  }

  .alert-corpo {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .alert-criticidade {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
  }

  .alert-row strong {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-md);
  }

  .alert-row p:not(.alert-criticidade) {
    margin: 0;
    color: var(--color-text-2);
    font-size: var(--fs-sm);
  }

  .alert-date {
    gap: var(--space-2);
    min-width: 0;
    justify-items: end;
  }

  .alert-prazo {
    color: var(--color-text-3);
    font-family: var(--mono);
    font-size: var(--fs-rubrica);
    white-space: nowrap;
  }

  .alert-abrir {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    color: var(--color-primary-strong);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }

  .alert-row:hover .alert-abrir,
  .alert-row:has(.alert-row-link:focus-visible) .alert-abrir {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    text-decoration: none;
  }

  .alert-row-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* Tabelas de treinamentos: o medidor de conformidade encolhe com a coluna
     e as células quebram; a régua do gráfico não força largura mínima. */
  .table-wrap.tabela-cartoes .compliance-meter {
    min-width: 0;
  }

  .table-wrap.tabela-cartoes .compliance-meter > div {
    flex: 1 1 60px;
    width: auto;
    max-width: 82px;
  }

  .table-wrap.tabela-cartoes.tabela-grafico table {
    min-width: 0;
  }

  /* Catálogo de cursos: a grade formulário + tabela só cabe quando a vista tem
     1000 px ou mais (a tabela de 7 colunas precisa de ~545 px, com folga para
     fontes mais largas). Abaixo disso, formulário e tabela empilham, como já
     acontece abaixo de 1200 px de janela. */
  .training-view {
    container: treinamentos / inline-size;
  }

  @container treinamentos (max-width: 999px) {
    .training-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .training-form-panel {
      position: static;
    }
  }

  /* Tabela de cursos ao lado do formulário: enquanto o painel tiver menos de
     680 px, as colunas de prioridade 3 (Empresa, Carga) saem, como no tablet;
     assim o nome do curso não quebra no meio da palavra. */
  @container (max-width: 679px) {
    .tabela-cursos th[data-prioridade="3"],
    .tabela-cursos td[data-prioridade="3"] {
      display: none;
    }
  }

  /* Foto do catálogo: quadrado alinhado ao nome. */
  .table-wrap.tabela-cartoes td.col-foto {
    width: 56px;
  }

  /* Campo obrigatório deixado em branco (ou inválido) depois de a pessoa
     mexer nele: o navegador sabe, o CSS mostra. Sem JavaScript. */
  .field :is(input, select, textarea):user-invalid {
    border-color: var(--color-danger);
  }

  .field :is(input, select, textarea):user-invalid:focus {
    box-shadow: 0 0 0 3px var(--color-danger-bg);
  }

  /* ---------- 13. FAIXAS ----------
     bp:notebook ≤ 1200 · bp:tablet ≤ 900 · bp:celular ≤ 640 */
  @media (max-width: 1200px) {
    .content {
      padding: var(--space-6) var(--space-8) var(--space-8);
    }

    .busca-global-slot {
      padding: 0 var(--space-8);
    }

    .view-grid.dossie-grid,
    .painel-duplo {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 900px) {
    .app-shell,
    .app-shell[data-indice="compacto"] {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Gaveta: fora da tela até o ☰; com fundo escurecido, ESC e clique fora. */
    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: var(--z-drawer);
      width: min(300px, 86vw);
      height: 100dvh;
      padding: var(--space-4) 0;
      overflow: hidden auto;
      visibility: hidden;
      transform: translateX(-102%);
      transition: transform var(--dur-3) var(--ease);
    }

    .app-shell.menu-aberto .sidebar {
      visibility: visible;
      box-shadow: var(--shadow-lg);
      transform: none;
    }

    .app-shell .indice-fundo {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-drawer) - 1);
      display: block;
      background: rgba(16, 29, 44, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-3) var(--ease);
    }

    .app-shell.menu-aberto .indice-fundo {
      opacity: 1;
      pointer-events: auto;
    }

    .sidebar .indice-fechar {
      display: inline-flex;
      width: 40px;
      height: 40px;
      padding: 0;
    }

    .indice-pe {
      display: none;
    }

    .topbar .menu-hamburguer {
      display: inline-flex;
      flex: none;
      width: 44px;
      height: 44px;
      padding: 0;
    }

    .topbar {
      padding: var(--space-2) var(--space-4);
    }

    /* Os agrupadores somem da grade: busca, ação, filtro e conta passam a ser
       filhos diretos do cabeçalho, e o que não cabe desce em linha própria. */
    .topbar-actions,
    .comando-barra {
      display: contents;
    }

    .timbre-id {
      flex: 1 1 0;
    }

    .tenant-status {
      display: none;
    }

    .conta-sair span,
    .conta-operador > span,
    .conta-operador .menu-seta {
      display: none;
    }

    .conta-sair,
    .conta-operador {
      width: 44px;
      min-height: 44px;
      padding: 0;
    }

    .conta-barra {
      padding-left: var(--space-2);
    }

    /* Com mais de uma empresa, o filtro desce para uma linha própria. */
    .topbar-actions .field.compact {
      flex: 1 1 100%;
      order: 30;
      max-width: none;
    }

    .content {
      padding: var(--space-5) var(--space-6) var(--space-8);
    }

    .busca-global-slot {
      padding: 0 var(--space-6);
    }

    .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-prioridade="3"] {
      display: none;
    }

    .print-area .audit-ficha-sheet,
    .print-area .print-sheet {
      zoom: 0.8;
    }

    /* Colunas saíram: o botão de detalhe aparece e a linha aberta mostra o resto. */
    .tabela-detalhe-botao {
      display: inline-flex;
    }

    tr.aberta + tr.tabela-detalhe {
      display: table-row;
    }
  }

  @media (max-width: 640px) {
    .topbar {
      gap: var(--space-1) var(--space-2);
      min-height: 56px;
      padding: var(--space-1) var(--space-3);
    }

    .timbre-id h1,
    .topbar h1 {
      font-size: var(--fs-lg);
    }

    .timbre-dados,
    .tenant-status {
      display: none;
    }

    .campo-busca {
      display: none;
    }

    .topbar .busca-abrir {
      display: inline-flex;
      width: 44px;
      height: 44px;
      padding: 0;
    }

    .topbar.busca-aberta .campo-busca {
      display: flex;
      flex: 1 1 100%;
      order: 20;
      width: 100%;
      height: 44px;
    }

    .comando-barra .primary-button span {
      display: none;
    }

    .comando-barra .primary-button {
      width: 44px;
      min-width: 44px;
      padding: 0;
    }

    .conta-barra {
      gap: var(--space-1);
      padding-left: 0;
      border-left: 0;
    }

    .conta-sair {
      display: none;
    }

    .menu-lista .menu-sair {
      display: flex;
    }

    .topbar button,
    .topbar a[href] {
      min-width: 44px;
      min-height: 44px;
    }

    .content {
      padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .busca-global-slot {
      padding: 0 var(--space-4);
    }

    .view {
      gap: var(--space-4);
    }

    .primary-button,
    .secondary-button,
    .outline-button,
    .danger-button,
    .ghost-button,
    .icon-button,
    .table-action,
    .field input,
    .field select,
    .field textarea {
      min-height: var(--toque);
    }

    .table-action,
    .icon-button {
      min-width: var(--toque);
    }

    .panel-header,
    .panel-body {
      padding: var(--space-4);
    }

    .aba-folha {
      padding: var(--space-2) var(--space-4);
    }

    .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
    }

    .stat-card,
    .summary-item,
    .account-metric,
    .epi-metric-card,
    .ficha-metric-card,
    .training-metric,
    .audit-metrics > div {
      padding: var(--space-3) var(--space-4);
    }

    .stat-card .stat-value,
    .summary-item strong,
    .account-metric strong,
    .epi-metric-card strong,
    .ficha-metric-card strong,
    .training-metric strong,
    .audit-metrics > div strong {
      font-size: var(--fs-h1);
    }

    .stat-icone {
      display: none;
    }

    .painel-hero {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--space-4);
    }

    .hero-aro {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      justify-self: stretch;
      justify-items: start;
      text-align: left;
    }

    .aro-conformidade {
      width: 96px;
      height: 96px;
    }

    .hero-aro-nota {
      text-align: left;
    }

    [data-prioridade="2"] {
      display: none;
    }

    /* Cartões no lugar de linhas. */
    .tabela-cartoes thead {
      display: none;
    }

    .tabela-cartoes table,
    .tabela-cartoes tbody,
    .tabela-cartoes tfoot,
    .tabela-cartoes tr,
    .tabela-cartoes td,
    .tabela-cartoes tbody th,
    .tabela-cartoes tfoot th {
      display: block;
      width: auto;
      min-width: 0;
    }

    /* Cabeçalho de linha (scope=row) vira o título do cartão. */
    .tabela-cartoes tbody th,
    .tabela-cartoes tfoot th {
      padding: 0 0 var(--space-1);
      font-family: var(--serif);
      font-size: var(--fs-md);
      text-align: left;
      text-transform: none;
      letter-spacing: 0;
      background: transparent;
      border: 0;
    }

    .tabela-cartoes tr {
      display: grid;
      gap: var(--space-1);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }

    .tabela-cartoes tr:last-child {
      border-bottom: 0;
    }

    .tabela-cartoes tbody tr:hover td {
      background: transparent;
    }

    .tabela-cartoes td {
      display: grid;
      grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
      gap: var(--space-2);
      align-items: baseline;
      padding: 0;
      border: 0;
    }

    .tabela-cartoes td[data-prioridade="2"] {
      display: grid;
    }

    .tabela-cartoes td::before {
      color: var(--color-text-3);
      font-size: var(--fs-rubrica);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      content: attr(data-rotulo);
    }

    .tabela-cartoes td.tabela-acao {
      grid-template-columns: minmax(0, 1fr);
      text-align: left;
    }

    .tabela-cartoes td.tabela-acao::before {
      content: none;
    }

    .table-wrap.tabela-cartoes td.tabela-acao .table-action {
      min-height: var(--toque);
      padding: var(--space-2) var(--space-3);
    }

    dialog {
      width: 100vw;
      max-height: 92dvh;
      margin: auto 0 0;
      border-bottom: 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .dialogo-critico {
      width: 100vw;
    }

    .toast {
      right: var(--space-3);
      bottom: var(--space-3);
      left: var(--space-3);
      max-width: none;
    }

    .training-tabs {
      flex-wrap: wrap;
    }

    .tabela-cartoes tr.tabela-detalhe {
      display: none;
    }

    .tabela-cartoes tr.aberta + tr.tabela-detalhe {
      display: block;
      padding: 0;
      border-bottom: 1px solid var(--color-border);
    }

    .tabela-cartoes tr.tabela-detalhe td {
      display: block;
      padding: 0 var(--space-4) var(--space-3);
    }

    .tabela-detalhe-lista {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filtro-chip {
      min-height: var(--toque);
      padding: 0 var(--space-4);
    }

    .table-wrap .link-button {
      display: inline-flex;
      align-items: center;
      min-height: var(--toque);
    }

    .vinculo-linha select,
    .field.compact select,
    .field.compact input {
      min-height: var(--toque);
    }

    .epi-command,
    .ficha-command {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--space-4);
    }

    .epi-command-actions,
    .ficha-command-actions {
      justify-content: flex-start;
    }

    .ficha-generator-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .ficha-generator-row .row-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .ficha-generator-row .row-actions > * {
      width: 100%;
    }

    /* Prévia da folha A4 no celular: a folha inteira reduzida, em vez de
       rolar de lado; a impressão não muda (regra só de tela). */
    .print-area .audit-ficha-sheet,
    .print-area .print-sheet {
      zoom: 0.55;
    }

    .evento-overlay {
      align-items: flex-end;
      padding: 0;
    }

    .evento-caixa {
      max-height: 92dvh;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .evento-caixa .row-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .evento-caixa .row-actions > * {
      width: 100%;
    }

    .alert-row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2);
    }

    .alert-date {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      justify-items: start;
    }

    .alert-abrir {
      min-height: var(--toque);
    }
  }
}

/* Quem pede menos movimento não vê nenhum: nem entrada, nem balão, nem giro. */
@media screen and (prefers-reduced-motion: reduce) {
  .vista-nova .view > *,
  .vista-nova .stats-grid > .stat-card,
  .menu-lista,
  dialog[open] {
    animation: none;
  }

  .sidebar,
  .indice-fundo,
  .nav-item,
  .campo-busca,
  .panel,
  .primary-button,
  .secondary-button,
  .outline-button,
  .ghost-button,
  .danger-button,
  .icon-button,
  .table-action,
  .toast {
    transition: none;
  }
}

/* A gaveta aberta trava a rolagem da página atrás dela. */
html.menu-aberto,
html.menu-aberto body {
  overflow: hidden;
}