/* ============================================================
   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: #6a7889;
  --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: #5c7a18;
  --oliva-bg: #f1f6e3;
  --ambar: #9a6408;
  --ambar-bg: #fdf2dc;
  --laranja: #b4530a;
  --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: 18px;
  --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: 1180px;
  --ctrl-h: 36px;
  --toque: 44px;
  /* altura do timbre grudado no topo: alvo de rolagem precisa reservar. */
  --topbar-h: 160px;

  /* ---------- 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);

  /* ============================================================
     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);
  background-image:
    repeating-linear-gradient(90deg, rgba(25, 22, 18, 0.013) 0 1px, transparent 1px 4px),
    radial-gradient(1200px 620px at 76% -10%, rgba(25, 22, 18, 0.035), transparent 62%);
  background-attachment: fixed;
}

[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: 17px;
  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: 14px;
  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 420ms 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: 24px;
}

.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: 0 12px 24px rgba(25, 22, 18, 0.07);
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

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

.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: 13px;
}

.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: 13px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
  animation: fade-up 360ms var(--ease) both;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  padding: 20px 0;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-right: 1px solid var(--regua-2);
  box-shadow: none;
  animation: slide-in-left 420ms var(--ease) both;
}

.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 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.nav-item {
  position: relative;
  display: flex;
  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 880ms 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;
}

.sidebar-footer {
  display: grid;
  gap: 8px;
  margin: auto 20px 0;
  padding-top: 14px;
  border-top: 1px solid var(--regua);
}

.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;
}

.workspace {
  min-width: 0;
  background: var(--papel-2);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  padding: 18px clamp(18px, 3vw, 34px);
  background: var(--papel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(25, 22, 18, 0.05);
  backdrop-filter: blur(18px);
}

.topbar h1 {
  margin: 4px 0 0;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.1;
  letter-spacing: 0;
}

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

.topbar-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.tenant-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 190px;
  max-width: 280px;
}

.tenant-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.tenant-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: var(--regua);
  border-radius: var(--r);
}

.trial-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-strong));
  border-radius: inherit;
  transform-origin: left;
  animation: meter-sweep 780ms var(--ease) both;
}

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

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

.content {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px clamp(18px, 3vw, 34px) 40px;
}

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

.view > * {
  animation: fade-up 440ms var(--ease) both;
}

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

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

.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 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms 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 180ms 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: 16px;
  letter-spacing: 0.01em;
}

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

.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: 30px;
}

.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 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.cadastro-step:not(.locked):hover,
.cadastro-step.active {
  border-color: var(--oficial-bg);
  box-shadow: 0 0 0 3px var(--oficial-bg), var(--sombra-baixa);
  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: 15px;
}

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

.guided-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
  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: 13px;
}

.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-card {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(251, 250, 246, 0.92), rgba(251, 250, 246, 0.98));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

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

.stat-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--primary), var(--blue));
  opacity: 0.84;
}

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

.stat-value {
  margin: 14px 0 4px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

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

.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: 12px;
  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 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease), transform 160ms 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 120ms ease, border-color 120ms ease, box-shadow 120ms 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: 0 0 0 3px rgba(31, 78, 121, 0.1);
}

.check-field.compact {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}

/* 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;
}

.risk-level-option {
  align-items: flex-start;
}

.risk-level-option .cell-main span {
  font-size: 12px;
}

.risk-level-option .cell-main strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Portador redundante do grau: algarismo romano em caixa, legível sem cor. */
.risk-level-num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  font-size: var(--fs-rubrica);
  font-weight: 700;
  line-height: 1;
  color: var(--tinta-2);
  border: 1px solid var(--regua-3);
  border-radius: var(--r);
}

.risk-level-option[data-level="1"]:has(input:checked) .risk-level-num {
  color: var(--papel);
  background: var(--selo);
  border-color: var(--selo);
}

.risk-level-option[data-level="2"]:has(input:checked) .risk-level-num {
  color: var(--papel);
  background: var(--ambar);
  border-color: var(--ambar);
}

.risk-level-option[data-level="3"]:has(input:checked) .risk-level-num {
  color: var(--papel);
  background: var(--laranja);
  border-color: var(--laranja);
}

.risk-level-option[data-level="4"]:has(input:checked) .risk-level-num {
  color: var(--papel);
  background: var(--carimbo);
  border-color: var(--carimbo);
}

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

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

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

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

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

.risk-chips .check-field {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

/* 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: 12px;
  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: 0 0 0 3px rgba(31, 78, 121, 0.14);
}

.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: 12px;
  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 140ms var(--ease), transform 140ms var(--ease);
}

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

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

.cell-main strong {
  font-size: 14px;
}

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

.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 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms 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: 13px;
}

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

.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 360ms 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: 13px;
}

.bar-track {
  height: 12px;
  overflow: hidden;
  background: var(--regua);
  border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(25, 22, 18, 0.08);
}

.bar-fill {
  height: 100%;
  min-width: 2px;
  background: linear-gradient(90deg, var(--primary), var(--selo));
  border-radius: inherit;
  transform-origin: left;
  animation: meter-sweep 900ms 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 160ms var(--ease), border-color 160ms 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: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.summary-item strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.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 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms 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: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.epi-metric-card strong,
.ficha-metric-card strong {
  display: block;
  color: var(--text);
  font-size: 26px;
  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);
}

.epi-catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: 16px;
  align-items: start;
}

.epi-management-table table {
  min-width: 1060px;
}

.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;
}

.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 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms 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;
}

.ficha-history-table table {
  min-width: 920px;
}

.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 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}

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

.account-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  overflow-wrap: anywhere;
}

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

.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: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.backup-status-card strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

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

.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: 22px;
}

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

.backup-action-hint {
  color: var(--muted);
  font-size: 12px;
  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: 12px;
}

.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 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms 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: 13px;
}

.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 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms 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: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-block strong {
  display: block;
  margin: 6px 0;
  font-size: 17px;
}

.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: 12px;
  font-weight: 700;
}

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

.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: 12px;
}

.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: 13px;
}

.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: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.audit-section-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(340px, 0.95fr);
  gap: 16px;
  margin-bottom: 16px;
}

.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 360ms 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,
.audit-list-row span,
.audit-list-row small,
.audit-list-row em {
  margin: 0;
  color: var(--muted);
}

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

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

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

.audit-list-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.audit-list-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: var(--blue);
}

.audit-list-row.warn::before {
  background: var(--amber);
}

.audit-list-row.danger::before {
  background: var(--red);
}

.audit-list-row strong,
.audit-list-row span,
.audit-list-row small,
.audit-list-row em {
  display: block;
}

.audit-list-row em {
  margin-top: 6px;
  font-style: normal;
}

.audit-list-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 150px;
  text-align: right;
}

.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: 13px;
}

.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: 12px;
  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: 0 12px 28px rgba(25, 22, 18, 0.14);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

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

.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: 26px;
}

.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 180ms var(--ease), transform 180ms 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: 13px;
}

.training-metric strong {
  font-size: 25px;
  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 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms 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: 12px;
}

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

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

.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: 20px;
}

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

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

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

.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: 15px;
  word-break: break-word;
}

.employee-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  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: 12px;
}

.employee-hash {
  font-size: 12px;
  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);
}

/* ------------------------------------------------------------
   3. TIMBRE — cabeçalho de página com identificação em mono
   ------------------------------------------------------------ */
.topbar {
  align-items: flex-end;
  flex-wrap: wrap;
  min-height: 0;
  padding: 14px clamp(14px, 3vw, 28px) 0;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
  box-shadow: none;
  backdrop-filter: none;
}

.topbar > div:first-child,
.topbar-actions {
  padding-bottom: 12px;
}

.topbar-actions {
  margin-left: auto;
}

.topbar h1 {
  margin: 3px 0 0;
  font-size: var(--fs-h2);
  letter-spacing: 0.005em;
}

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

.tenant-status {
  min-width: 220px;
  max-width: 380px;
}

.tenant-line {
  flex-wrap: wrap;
  color: var(--tinta-3);
  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: visible;
  color: var(--tinta-2);
  text-align: right;
  white-space: normal;
}

.trial-meter {
  height: 9px;
  background: var(--papel-3);
  border: 1px solid var(--regua);
  border-radius: 1px;
}

.trial-meter-fill {
  background: var(--oficial);
  border-radius: 0;
}

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

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

/* ------------------------------------------------------------
   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: 28px;
  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);
}

.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);
}

/* ------------------------------------------------------------
   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;
}

dialog {
  max-width: min(560px, calc(100vw - 32px));
  padding: 20px 22px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-top: 3px solid var(--tinta);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
}

dialog::backdrop {
  background: rgba(25, 22, 18, 0.42);
}

/* 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: 1100px) {
  .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: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .saas-command {
    grid-template-columns: 1fr;
  }

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

  .sidebar {
    position: static;
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
    height: auto;
    padding: 14px;
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav-list {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    overflow-x: auto;
  }

  .nav-item {
    justify-content: center;
    min-width: 92px;
  }

  .nav-item span {
    display: none;
  }

  .sidebar-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }

  .topbar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    align-items: end;
  }

  .tenant-status {
    max-width: none;
  }

  .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,
  .audit-list-row,
  .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: 13px;
}

.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: 12px;
  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: 15px;
  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: 13px;
  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: 12px;
  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.
   ============================================================ */

/* ------------------------------------------------------------
   3.1 TIMBRE — razão social, CNPJ e filial no alto da página
   ------------------------------------------------------------ */
/* Timbre e comandos dividem UMA linha só, como no protótipo: identificação à
   esquerda, régua de comandos à direita. Nada de faixa separada embaixo. */
/* Como o protótipo (.timbre-linha): uma linha flex que só quebra quando a
   identidade não cabe ao lado dos comandos — e, quando quebra, é a régua de
   comandos inteira que desce, nunca o botão escuro sozinho. */
.topbar {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  padding-bottom: 0;
}

.topbar > * {
  min-width: 0;
}

.timbre-id {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

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

.topbar-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 0;
  margin-left: auto;
  padding: 0;
  border-top: 0;
}

/* A fila de comandos é indivisível: busca, Imprimir dossiê e Nova entrega
   numa fileira só. */
.topbar-actions .comando-barra {
  flex-wrap: nowrap;
}

.topbar-actions .campo-busca {
  flex: 0 1 320px;
}

/* Rótulo de comando nunca quebra em duas linhas: "Imprimir dossiê" é o nome
   do documento, não um parágrafo. */
.topbar-actions .secondary-button,
.topbar-actions .primary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* O status da conta virou selo do rodapé do índice: não divide mais a barra
   de comandos com a busca. */
.sidebar-footer .tenant-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: none;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--regua);
}

.sidebar-footer .tenant-status:empty {
  display: none;
}

.sidebar-footer .tenant-line {
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
}

.tenant-line span:not(.badge) {
  overflow: hidden;
  max-width: min(62ch, 100%);
  color: var(--tinta-3);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Régua de prazo do acesso: um filete curto, não uma barra de progresso. */
.trial-meter {
  flex: none;
  width: 60px;
  height: 4px;
  background: var(--papel-3);
  border: 1px solid var(--regua);
}

.trial-meter-fill {
  background: var(--oficial);
}

.trial-meter-fill.warn {
  background: var(--ambar);
}

.trial-meter-fill.danger {
  background: var(--carimbo);
}

.topbar-actions .field.compact {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 216px;
}

.topbar-actions .field.compact > span {
  font-size: var(--fs-rubrica);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.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;
}

/* Um índice não tem ícones: número de ordem, verbete, pontilhado e
   contagem. Os botões do rodapé continuam com os seus. */
.nav-item > i,
.nav-item > svg {
  display: none;
}

.nav-item {
  gap: 10px;
}

.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 160ms var(--ease), border-color 160ms 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: 860px) {
  .sidebar {
    gap: 12px;
    padding: 12px 14px;
  }

  .brand {
    margin: 0;
    padding-bottom: 12px;
  }

  .indice-titulo {
    display: none;
  }

  .nav-list {
    display: flex;
    gap: 6px;
    padding: 0;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    padding: 8px 12px;
    background: var(--papel);
    border: 1px solid var(--regua-2);
    border-radius: var(--r);
    box-shadow: none;
  }

  .nav-item .nav-num,
  .nav-item .nav-leader {
    display: none;
  }

  .nav-item .nav-label {
    display: inline;
    font-size: var(--fs-sm);
  }

  .nav-item .nav-count {
    display: inline-grid;
  }

  .nav-item.active {
    color: var(--papel);
    background: var(--tinta);
    border-color: var(--tinta);
    box-shadow: none;
  }

  .nav-item.active svg {
    color: var(--papel);
  }

  .nav-item.active .nav-count {
    color: var(--papel);
    background: transparent;
    border-color: var(--papel);
  }

  .sidebar-footer {
    margin: 12px 0 0;
    padding-top: 12px;
  }

  .topbar {
    padding: 12px 14px 0;
  }

  .topbar > div:first-child,
  .topbar-actions {
    padding-bottom: 10px;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .tenant-status {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .tenant-line {
    justify-content: flex-start;
  }

  .tenant-line span:not(.badge) {
    text-align: left;
  }

  .topbar-actions .field.compact {
    flex: 1 1 150px;
    min-width: 0;
  }
}

@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: 1100px) {
  .view-grid,
  .audit-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  /* Em coluna, o timbre precisa da largura toda: alinhado à esquerda
     como a identificação de um documento, nunca à direita. */
  .topbar {
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 0;
  }

  .timbre-id,
  .topbar-actions {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
  }

  .topbar-actions .field.compact {
    flex: 1 1 150px;
    max-width: none;
  }

  /* Na gaveta, o resumo do arquivo sai da frente: quem abre o app no
     celular quer a tela, não a contracapa. Ele volta no rodapé impresso. */
  .arquivo-resumo {
    display: none;
  }

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

  /* 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: 860px) {
  /* 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;
  }

  /* A gaveta entrega primeiro o índice e a tela; Backup, Restaurar e Sair
     ficam no fim, abaixo do conteúdo, em vez de tomarem uma faixa inteira
     acima do título da página. */
  .app-shell {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    display: contents;
  }

  .brand {
    order: 1;
    margin: 12px 14px 0;
  }

  .indice-titulo {
    order: 2;
  }

  .nav-list {
    order: 3;
    padding: 0 14px;
  }

  .workspace {
    order: 4;
    min-width: 0;
  }

  .sidebar-footer {
    order: 5;
    margin: 0;
    padding: 12px 14px;
    background: var(--papel-2);
    border-top: 1px solid var(--regua);
  }
}

/* ------------------------------------------------------------
   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: 860px) {
  .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 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: 860px) {
  .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;
}

/* ------------------------------------------------------------
   MARCA D'ÁGUA — a palavra do documento aberto, na diagonal
   ------------------------------------------------------------ */
[data-marca] {
  position: relative;
  overflow: hidden;
}

[data-marca]::after {
  position: absolute;
  right: 4%;
  bottom: 6%;
  z-index: 0;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: calc(var(--fs-carimbo) * 2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  content: attr(data-marca);
  opacity: 0.04;
  transform: rotate(-18deg);
  transform-origin: 100% 100%;
  pointer-events: none;
}

[data-marca] > * {
  position: relative;
  z-index: 1;
}

@media print {
  [data-marca]::after {
    display: none;
  }
}

/* ------------------------------------------------------------
   FAIXA INTERMEDIÁRIA (861–1100px) — a folha não rola na horizontal
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .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;
  }

  .app-shell {
    grid-template-columns: minmax(0, var(--indice)) minmax(0, 1fr);
  }
}

/* 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: 1100px) {
  .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.1 BARRA DE COMANDOS — busca, imprimir dossiê, nova entrega
   ------------------------------------------------------------ */
.comando-barra {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  min-width: 0;
  margin-left: auto;
}

.campo-busca {
  position: relative;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  max-width: 320px;
  height: var(--ctrl-h);
  padding: 0 var(--s3);
  background: var(--papel);
  border: 1px solid var(--regua-2);
  border-radius: var(--r);
}

.campo-busca:focus-within {
  border-color: var(--oficial);
  box-shadow: 0 0 0 2px var(--oficial-bg);
}

.campo-busca svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--tinta-3);
}

.campo-busca input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--fs-sm);
  background: transparent;
  border: 0;
  outline: none;
}

.campo-busca input::placeholder {
  color: var(--tinta-3);
}

.campo-busca input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* ------------------------------------------------------------
   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: 860px) {
  .comando-barra {
    flex: 1 1 100%;
    justify-content: stretch;
    margin-left: 0;
  }

  .campo-busca {
    flex: 1 1 100%;
    max-width: none;
  }

  .comando-barra .secondary-button,
  .comando-barra .primary-button {
    flex: 1 1 45%;
    justify-content: center;
  }

  /* No celular a fila volta a quebrar: as regras de fileira única do timbre
     valem só onde há largura para elas. */
  .topbar-actions .comando-barra {
    flex-wrap: wrap;
  }

  .topbar-actions .campo-busca {
    flex: 1 1 100%;
  }

  .topbar-actions .secondary-button,
  .topbar-actions .primary-button {
    flex: 1 1 45%;
  }

  .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: 860px) {
  .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: 860px) {
  .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: 1080px) {
  .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);
}

/* 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: 1100px) {
  .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-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: 480px) {
  .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é. */
  body {
    background-color: var(--papel-fundo);
    background-image:
      radial-gradient(1100px 560px at 78% -12%, rgba(19, 72, 168, 0.09), transparent 62%),
      radial-gradient(900px 520px at 4% 108%, rgba(0, 128, 143, 0.08), transparent 60%);
    background-attachment: fixed;
  }

  /* ---------- 2. O ÍNDICE LATERAL ----------
     Continua sendo índice de arquivo (romano, pontilhado), mas o
     item ativo passa a ser uma pastilha da marca em vez de um
     filete, e a marca no topo ganha o degradê da identidade. */
  .sidebar {
    background: var(--papel);
    border-right: 1px solid var(--regua);
    box-shadow: 1px 0 0 rgba(16, 29, 44, 0.02), 12px 0 32px -28px rgba(16, 29, 44, 0.35);
  }

  .brand {
    position: relative;
  }

  .brand::after {
    position: absolute;
    right: 20px;
    bottom: 0;
    left: 20px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--marca-azul), var(--marca-teal) 60%, transparent);
    opacity: 0.5;
  }

  .brand-mark {
    color: #fff;
    background: linear-gradient(135deg, var(--marca-navy), var(--marca-azul) 45%, var(--marca-teal));
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: var(--sombra-marca);
  }

  .brand strong {
    background: linear-gradient(100deg, var(--marca-navy), var(--marca-teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .nav-item {
    position: relative;
    border-radius: var(--r-sm);
    transition:
      background-color 160ms var(--ease),
      color 160ms var(--ease),
      transform 160ms var(--ease);
  }

  .nav-item:hover {
    color: var(--tinta);
    background: var(--papel-3);
    box-shadow: none;
    transform: translateX(2px);
  }

  .nav-item.active {
    color: var(--marca-navy);
    background: linear-gradient(90deg, var(--oficial-bg), rgba(233, 240, 251, 0.35));
    box-shadow: none;
    transform: none;
  }

  /* A marca do item ativo é uma barra arredondada, não um filete
     colado na borda: lê como seleção, não como erro de impressão. */
  .nav-item.active::before {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 3px;
    height: 60%;
    content: "";
    background: linear-gradient(180deg, var(--marca-azul), var(--marca-teal));
    border-radius: var(--r-pill);
    transform: translateY(-50%);
  }

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

  .nav-count {
    border-radius: var(--r-pill);
  }

  .ghost-button {
    border-radius: var(--r-sm);
    transition:
      background-color 160ms var(--ease),
      border-color 160ms var(--ease),
      transform 160ms var(--ease);
  }

  .ghost-button:hover {
    border-color: var(--regua-2);
    transform: translateY(-1px);
  }

  /* ---------- 3. O TIMBRE ----------
     A régua preta de 2px virava moldura de formulário. Vira um
     filete da marca, com o papel do topo levemente translúcido. */
  .topbar {
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.94));
    border-bottom: 1px solid var(--regua);
    box-shadow: 0 1px 0 rgba(16, 29, 44, 0.02), 0 10px 24px -22px rgba(16, 29, 44, 0.5);
    backdrop-filter: blur(6px);
  }

  .topbar h1 {
    color: var(--marca-navy);
  }

  /* ---------- 4. FOLHAS DE CONTEÚDO ----------
     Painel, cartão e caixa passam a ter canto macio e sombra de
     folha suspensa, e sobem 1px quando o ponteiro chega. */
  .panel,
  .stat-card,
  .table-wrap,
  dialog {
    border-radius: var(--r);
  }

  .panel {
    border: 1px solid var(--regua);
    box-shadow: var(--sombra-folha);
    transition: box-shadow 220ms var(--ease);
  }

  .panel:hover {
    box-shadow: var(--sombra-alta);
  }

  .panel-header h2 {
    color: var(--marca-navy);
  }

  /* A aba de folha (rubrica do topo do painel) ganha a tinta da
     marca e um ponto: para de parecer etiqueta de pasta cinza. */
  .aba-folha {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--marca-azul);
    background: linear-gradient(90deg, var(--oficial-bg), transparent 70%);
    border-bottom-color: var(--regua);
  }

  .aba-folha::before {
    flex: none;
    width: 6px;
    height: 6px;
    content: "";
    background: var(--marca-teal);
    border-radius: 50%;
  }

  /* ---------- 5. INDICADORES ----------
     Cada indicador ganha um medalhão de ícone e uma faixa de cor
     em degradê no topo. O número sai da serifada: em corpo grande
     a serifada lê como lápide; a sans lê como painel. */
  .stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--regua);
    border-top: 1px solid var(--regua);
    box-shadow: var(--sombra-folha);
    transition:
      transform 200ms var(--ease),
      box-shadow 200ms var(--ease);
  }

  .stat-card::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--stat-cor, var(--oficial)), color-mix(in srgb, var(--stat-cor, var(--oficial)) 35%, #fff));
  }

  .stat-card:hover {
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
  }

  .stat-card[data-tone="blue"] {
    --stat-cor: var(--oficial);
  }
  .stat-card[data-tone="green"] {
    --stat-cor: var(--selo);
  }
  .stat-card[data-tone="violet"] {
    --stat-cor: var(--oliva);
  }
  .stat-card[data-tone="amber"] {
    --stat-cor: var(--ambar);
  }
  .stat-card[data-tone="red"] {
    --stat-cor: var(--carimbo);
  }
  .stat-card[data-tone="neutral"] {
    --stat-cor: var(--regua-3);
  }

  .stat-topo {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }

  .stat-icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--stat-cor, var(--oficial));
    background: color-mix(in srgb, var(--stat-cor, var(--oficial)) 12%, #fff);
    border-radius: var(--r-sm);
  }

  .stat-icone svg {
    width: 18px;
    height: 18px;
  }

  .stat-value {
    font-family: var(--sans);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .stat-unidade {
    margin-left: 2px;
    color: var(--tinta-3);
    font-size: 18px;
    font-weight: 700;
  }

  /* ---------- 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);
  }

  /* ---------- 7. BOTÕES ----------
     O botão principal ganha o degradê da marca e responde ao
     clique. Antes era um retângulo preto: lia como "sistema", e
     não como algo em que se pode tocar. */
  .primary-button,
  .secondary-button,
  .danger-button {
    border-radius: var(--r-sm);
    transition:
      transform 140ms var(--ease),
      box-shadow 140ms var(--ease),
      background-color 140ms var(--ease),
      border-color 140ms var(--ease);
  }

  .primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--marca-azul), var(--marca-navy));
    border: 1px solid var(--marca-navy);
    box-shadow: var(--sombra-marca);
  }

  .primary-button:hover {
    background: linear-gradient(135deg, var(--marca-acao), var(--marca-azul));
    box-shadow: 0 8px 22px rgba(18, 58, 110, 0.3);
    transform: translateY(-1px);
  }

  .primary-button:active,
  .secondary-button:active,
  .ghost-button:active {
    transform: translateY(0) scale(0.985);
  }

  .secondary-button {
    color: var(--marca-navy);
    background: var(--papel);
    border: 1px solid var(--regua-2);
  }

  .secondary-button:hover {
    color: var(--marca-navy);
    background: var(--oficial-bg);
    border-color: color-mix(in srgb, var(--marca-azul) 35%, var(--regua-2));
    transform: translateY(-1px);
  }

  .secondary-button svg,
  .primary-button svg {
    transition: transform 200ms var(--mola);
  }

  .primary-button:hover svg,
  .secondary-button:hover svg {
    transform: scale(1.12);
  }

  /* 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 150ms var(--ease),
      box-shadow 150ms var(--ease),
      background-color 150ms 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 140ms 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);
  }

  .empty-passos li::before {
    color: #fff;
    background: linear-gradient(135deg, var(--marca-azul), var(--marca-teal));
    border: 0;
    border-radius: var(--r-pill);
  }

  /* ---------- 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, e um respiro quando o conteúdo
     troca. Quem pediu menos movimento no sistema não vê nada. */
  .view > * {
    animation: fade-up 320ms var(--ease) both;
  }

  .view > *:nth-child(2) {
    animation-delay: 40ms;
  }
  .view > *:nth-child(3) {
    animation-delay: 80ms;
  }
  .view > *:nth-child(4) {
    animation-delay: 120ms;
  }
  .view > *:nth-child(n + 5) {
    animation-delay: 160ms;
  }

  .stats-grid > .stat-card {
    animation: fade-up 340ms var(--ease) both;
  }
  .stats-grid > .stat-card:nth-child(2) {
    animation-delay: 60ms;
  }
  .stats-grid > .stat-card:nth-child(3) {
    animation-delay: 120ms;
  }
  .stats-grid > .stat-card:nth-child(4) {
    animation-delay: 180ms;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .view > *,
  .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 {
  .painel-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 4vw, 44px);
    align-items: center;
    overflow: hidden;
    padding: clamp(20px, 3vw, 30px) clamp(20px, 3.5vw, 36px);
    color: #e9f1fb;
    background: linear-gradient(122deg, #0a2352 0%, #123a6e 46%, #0c6c7d 100%);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 34px rgba(10, 35, 82, 0.28);
  }

  /* Textura de papel milimetrado por cima do degradê: dá matéria à
     superfície sem virar enfeite — é a mesma trama das réguas. */
  .painel-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 26px);
    opacity: 0.5;
    pointer-events: none;
  }

  .painel-hero > * {
    position: relative;
  }

  .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: 0 6px 18px rgba(5, 20, 45, 0.3);
  }

  .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: 0 0 0 3px rgba(255, 255, 255, 0.35);
  }

  /* ---------- 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 900ms 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: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .aro-centro strong span {
    margin-left: 1px;
    font-size: 16px;
    opacity: 0.75;
  }

  .aro-centro small {
    margin-top: 3px;
    color: rgba(233, 241, 251, 0.72);
    font-size: 11px;
    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 700ms 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 160ms var(--ease),
      background-color 160ms 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: 860px) {
    .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 200ms var(--ease),
      box-shadow 200ms var(--ease);
  }

  .epi-metric-card::after,
  .ficha-metric-card::after,
  .training-metric::after,
  .audit-metrics > div::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--stat-cor, var(--marca-teal)), color-mix(in srgb, var(--stat-cor, var(--marca-teal)) 32%, #fff));
  }

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

  .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: 30px;
    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 200ms var(--ease),
      box-shadow 200ms 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: 30px;
    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: 0 18px 50px rgba(10, 35, 82, 0.28);
  }

  .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 160ms var(--ease),
      transform 160ms 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: 720px) {
  .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. */
  .content {
    width: min(1400px, 100%);
  }

  /* 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);
  }
}

/* ============================================================
   ACESSO AO ARQUIVO — foto de um lado, palavra do outro
   A arte de marca inteira era o papel de parede: título, ícones
   e um botão desenhados DENTRO da imagem, que não clicavam. O
   cartão de acesso flutuava por cima — dois desenhos brigando —
   e a arte era recortada em toda proporção que não fosse a dela.
   Agora são duas colunas: a foto é só foto, e o que é texto é
   texto, que acompanha o zoom e é lido por leitor de tela.
   ============================================================ */
@media screen {
  .login-screen {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(min(100%, 460px), 0.98fr);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: var(--papel);
    isolation: isolate;
  }

  /* A moldura antiga (borda, gradiente, escala 0.96) não existe mais. */
  .login-screen::before {
    display: none;
  }

  /* ---------- coluna da foto ---------- */
  .login-foto {
    position: relative;
    overflow: hidden;
    background: var(--marca-navy);
  }

  .login-foto img,
  .login-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* O trabalhador está à esquerda e olha para a direita, na direção do
       formulário. Ancorar em 32% mantém o rosto no quadro quando a coluna
       fica estreita, em vez de cortar a cabeça. */
    object-fit: cover;
    object-position: 32% 50%;
    filter: none;
    transform: none;
    min-width: 0;
    min-height: 0;
    z-index: 0;
  }

  /* Véu de marca sobre a foto: costura a imagem ao azul do sistema e
     garante contraste se algum dia entrar texto por cima. */
  .login-foto::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(115deg, rgba(10, 35, 82, 0.34), rgba(10, 35, 82, 0) 58%),
      linear-gradient(to right, rgba(10, 35, 82, 0) 82%, rgba(255, 255, 255, 0.18));
    pointer-events: none;
  }

  /* ---------- coluna do acesso ---------- */
  .login-lado {
    display: grid;
    align-content: center;
    /* Centrado na coluna: encostado à esquerda sobravam 350 px de nada à
       direita numa tela de 1920, e o conjunto ficava torto. */
    justify-items: center;
    gap: clamp(20px, 3vh, 34px);
    overflow-y: auto;
    padding: clamp(28px, 5vh, 64px) clamp(24px, 4.5vw, 72px);
    background: var(--papel);
  }

  /* Apresentação e cartão dividem a MESMA largura: as bordas se alinham
     numa coluna só, em vez de cada bloco terminar num lugar. */
  .login-apresentacao {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 520px;
  }

  .login-marca {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
  }

  .login-marca-selo {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--marca-navy), var(--marca-azul) 45%, var(--marca-teal));
    border-radius: var(--r-pill);
    box-shadow: var(--sombra-marca);
  }

  .login-marca strong {
    display: block;
    color: var(--marca-navy);
    font-family: var(--sans);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .login-marca small {
    display: block;
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    letter-spacing: 0.02em;
  }

  .login-titulo {
    margin: 4px 0 0;
    color: var(--marca-navy);
    font-family: var(--sans);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }

  .login-titulo em {
    color: var(--marca-teal);
    font-style: normal;
  }

  .login-chamada {
    max-width: 40ch;
    margin: 0;
    color: var(--tinta-2);
    font-size: var(--fs-md);
    line-height: 1.5;
  }

  .login-provas {
    display: grid;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
  }

  .login-provas li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: var(--tinta-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .login-provas svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    padding: 5px;
    box-sizing: content-box;
    color: var(--marca-azul);
    background: var(--oficial-bg);
    border-radius: var(--r-sm);
  }

  .login-provas strong {
    display: block;
    color: var(--tinta);
    font-size: var(--fs-body);
  }

  /* ---------- o cartão de acesso ---------- */
  .login-content,
  .login-content.login-content-right {
    display: block;
    grid-template-columns: none;
    justify-items: stretch;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .login-panel,
  .login-content-right .login-panel.single,
  .login-content-right .login-home-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--papel);
    border: 1px solid var(--regua-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-folha);
    backdrop-filter: none;
  }

  /* ---------- telas estreitas: a foto vira faixa no topo ---------- */
  @media (max-width: 1000px) {
    .login-screen {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: clamp(150px, 26vh, 260px) minmax(0, 1fr);
      position: absolute;
      min-height: 100dvh;
    }

    .login-foto img {
      object-position: 38% 42%;
    }

    .login-lado {
      padding: clamp(20px, 4vh, 32px) clamp(18px, 5vw, 32px) clamp(28px, 6vh, 44px);
    }

    .login-apresentacao {
      max-width: none;
    }

    /* No celular a lista de provas cansa antes de ajudar: o que importa é
       chegar ao acesso. O título e a chamada continuam. */
    .login-provas {
      display: none;
    }

    .login-content,
    .login-content.login-content-right {
      max-width: none;
    }
  }

  @media (max-width: 560px) {
    .login-titulo {
      font-size: clamp(24px, 7vw, 30px);
    }

    .login-chamada {
      font-size: var(--fs-body);
    }
  }
}

@media print {
  .login-screen {
    display: none !important;
  }
}

/* ============================================================
   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;
  }

  .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 — versão 2: hierarquia, não três caixas iguais
   A portaria oferecia "Admin do sistema", "Empresa cadastrada" e
   "Teste grátis" com o MESMO peso, e o admin vinha primeiro. Mas
   o admin é o dono da plataforma, que entra uma vez por mês;
   quem chega ali quer abrir a empresa. Três opções idênticas não
   decidem nada por quem lê — e é isso que faz uma tela parecer
   modelo pronto. Agora: uma ação principal, uma secundária e um
   link discreto para a administração.
   ============================================================ */
@media screen {
  /* ---------- a coluna da foto vira painel de marca ---------- */
  .login-foto {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(26px, 3.4vw, 46px);
  }

  .login-foto > * {
    position: relative;
    z-index: 1;
  }

  /* Véu mais presente que antes: a foto precisa virar fundo de texto,
     não continuar sendo a protagonista. O topo escurece o suficiente
     para o logotipo se apoiar onde o capacete toca a borda. */
  .login-foto::after {
    background:
      linear-gradient(180deg, rgba(6, 20, 46, 0.62), rgba(6, 20, 46, 0) 20%),
      linear-gradient(0deg, rgba(6, 20, 46, 0.8), rgba(6, 20, 46, 0) 34%),
      linear-gradient(100deg, rgba(10, 35, 82, 0.18), rgba(10, 35, 82, 0) 52%);
  }

  /* O véu tira luz da foto inteira; um leve ganho devolve o rosto. */
  .login-foto img {
    filter: brightness(1.04) saturate(1.03);
  }

  .login-foto-topo {
    align-self: start;
  }

  .login-foto-base {
    display: grid;
    gap: 16px;
    align-self: end;
    max-width: 38ch;
  }

  /* A marca sobre a foto: branca, sem caixa. */
  .login-foto .login-marca strong {
    color: #fff;
  }

  .login-foto .login-marca small {
    color: rgba(233, 241, 251, 0.78);
  }

  .login-foto .login-marca-selo {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: none;
  }

  .login-foto-frase {
    margin: 0;
    color: #fff;
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.008em;
    text-wrap: balance;
  }

  .login-foto-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .login-foto-selos li {
    padding: 5px 11px;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-rubrica);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--r-pill);
    backdrop-filter: blur(2px);
  }

  /* ---------- a coluna do acesso ---------- */
  .login-apresentacao {
    gap: 10px;
  }

  .login-titulo {
    margin: 0;
    font-size: clamp(26px, 2.4vw, 34px);
  }

  .login-chamada {
    max-width: 42ch;
    font-size: var(--fs-body);
  }

  /* ---------- a portaria ---------- */
  .login-portaria {
    display: grid;
    gap: 6px;
    width: 100%;
    max-width: 520px;
    padding-top: clamp(14px, 2.4vh, 26px);
    border-top: 1px solid var(--regua);
  }

  .login-portaria-titulo {
    margin: 0;
    color: var(--marca-navy);
    font-family: var(--sans);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .login-portaria-nota {
    margin: 0 0 12px;
    color: var(--tinta-3);
    font-size: var(--fs-sm);
  }

  .login-acoes {
    display: grid;
    gap: 10px;
  }

  /* A ação principal é um botão cheio: quem chega aqui quer isto. */
  .login-entrar,
  .login-criar {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 15px 18px;
    font: inherit;
    text-align: left;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition:
      transform 150ms var(--ease),
      box-shadow 150ms var(--ease),
      background-color 150ms var(--ease),
      border-color 150ms var(--ease);
  }

  .login-entrar {
    color: #fff;
    background: linear-gradient(135deg, var(--marca-azul), var(--marca-navy));
    border: 1px solid var(--marca-navy);
    box-shadow: var(--sombra-marca);
  }

  .login-entrar:hover {
    background: linear-gradient(135deg, var(--marca-acao), var(--marca-azul));
    box-shadow: 0 10px 26px rgba(18, 58, 110, 0.32);
    transform: translateY(-1px);
  }

  .login-entrar strong,
  .login-criar strong {
    display: block;
    font-size: var(--fs-md);
    font-weight: 700;
  }

  .login-entrar small {
    display: block;
    margin-top: 2px;
    color: rgba(233, 241, 251, 0.82);
    font-size: var(--fs-rubrica);
  }

  .login-entrar svg,
  .login-criar svg {
    width: 20px;
    height: 20px;
  }

  .login-seta {
    transition: transform 200ms var(--mola);
  }

  .login-entrar:hover .login-seta {
    transform: translateX(3px);
  }

  .login-criar {
    grid-template-columns: 22px minmax(0, 1fr);
    color: var(--marca-navy);
    background: var(--papel);
    border: 1px solid var(--regua-2);
  }

  .login-criar:hover {
    background: var(--oficial-bg);
    border-color: color-mix(in srgb, var(--marca-azul) 34%, var(--regua-2));
    transform: translateY(-1px);
  }

  .login-criar small {
    display: block;
    margin-top: 2px;
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    font-weight: 400;
  }

  /* Administração: link, não caixa. É uma porta de serviço. */
  .login-admin {
    margin: 16px 0 0;
    text-align: center;
  }

  .login-admin button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 6px 10px;
    color: var(--tinta-3);
    font: inherit;
    font-size: var(--fs-sm);
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color 150ms var(--ease), background-color 150ms var(--ease);
  }

  .login-admin button:hover {
    color: var(--marca-navy);
    background: var(--papel-2);
  }

  .login-admin svg {
    width: 15px;
    height: 15px;
  }

  /* Os outros painéis (login, cadastro, recuperação) continuam cartões,
     mas sem a moldura pesada: já estão dentro de uma coluna clara. */
  .login-panel,
  .login-content-right .login-panel.single {
    border: 1px solid var(--regua);
    box-shadow: none;
  }

  .login-panel-header h2 {
    font-family: var(--sans);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  /* ---------- telas estreitas ---------- */
  @media (max-width: 1000px) {
    .login-foto {
      grid-template-rows: auto 1fr;
      padding: 18px 20px;
    }

    /* Na faixa curta do celular a frase e os selos não cabem sem espremer
       a foto: fica só a marca, que é o que identifica a tela. */
    .login-foto-base {
      display: none;
    }

    .login-portaria {
      max-width: none;
    }
  }
}

@media screen {
  /* Fecha a coluna do acesso por baixo: sem isto o bloco central boiava
     numa coluna de 1080 px, com o mesmo vazio em cima e embaixo. */
  .login-rodape {
    width: 100%;
    max-width: 520px;
    margin: 0;
    color: var(--tinta-3);
    font-size: var(--fs-rubrica);
    line-height: 1.5;
    text-align: center;
  }

  .login-rodape span {
    display: block;
    color: var(--regua-3);
  }

  @media (max-width: 1000px) {
    .login-rodape {
      max-width: none;
    }
  }
}