/* Identidade visual do SGL (o restante vem do Bootstrap 5.3, ajustado pelas variáveis abaixo).
   As cores, fontes e tempos de animação (--sgl-*) ficam em tokens.css, que o painel administrativo também usa.

   Decisões baseadas em estudos (resumo e referências no README, seção "Identidade visual"):
   - base clara e pouco saturada; estrutura em azul-petróleo; menu verde-azulado claro;
   - coral e âmbar só em áreas pequenas e em conquistas (excitação em doses);
   - vermelho só para erro, sempre com ícone e texto;
   - Atkinson Hyperlegible Next (texto) e Mono (códigos); texto 16 px, tabelas 15 px, mínimo 13 px;
   - modo claro padrão, escuro opcional; tamanho do texto ajustável por pessoa (static/js/preferencias.js).
   Todo par de texto e fundo passa de 4,5:1 (WCAG 2.2 AA); bordas de campos, de 3:1. */

/* ---------- Cores e tipografia: modo claro (padrão) ---------- */

:root,
[data-bs-theme=light] {
  --bs-font-sans-serif: var(--sgl-fonte);
  --bs-font-monospace: var(--sgl-fonte-mono);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--sgl-texto);
  --bs-body-color-rgb: 26, 43, 46;
  --bs-body-bg: var(--sgl-fundo);
  --bs-body-bg-rgb: 245, 244, 240;
  --bs-emphasis-color: #0E1B1D;
  --bs-emphasis-color-rgb: 14, 27, 29;
  --bs-secondary-color: var(--sgl-texto-2);
  --bs-secondary-color-rgb: 86, 102, 106;
  --bs-secondary-bg: var(--sgl-neutro-bg);
  --bs-secondary-bg-rgb: 237, 236, 231;
  --bs-tertiary-color: var(--sgl-texto-2);
  --bs-tertiary-color-rgb: 86, 102, 106;
  --bs-tertiary-bg: var(--sgl-suave);
  --bs-tertiary-bg-rgb: 247, 246, 242;
  --bs-link-color: var(--sgl-petroleo-escuro);
  --bs-link-color-rgb: 11, 90, 86;
  --bs-link-hover-color: var(--sgl-link-hover);
  --bs-link-hover-color-rgb: 8, 71, 68;
  --bs-code-color: var(--sgl-texto-2);
  --bs-border-color: var(--sgl-borda);
  --bs-border-color-translucent: rgba(26, 43, 46, 0.12);
  --bs-border-radius: 0.625rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-focus-ring-color: var(--sgl-foco);
  --bs-primary: #0F6E69;
  --bs-primary-rgb: 15, 110, 105;
  --bs-secondary: #56666A;
  --bs-secondary-rgb: 86, 102, 106;
  --bs-success: #1B6A42;
  --bs-success-rgb: 27, 106, 66;
  --bs-info: #1F5596;
  --bs-info-rgb: 31, 85, 150;
  --bs-warning: #F2B441;
  --bs-warning-rgb: 242, 180, 65;
  --bs-danger: #B1261D;
  --bs-danger-rgb: 177, 38, 29;
  --bs-light: #EDECE7;
  --bs-light-rgb: 237, 236, 231;
  --bs-dark: #1A2B2E;
  --bs-dark-rgb: 26, 43, 46;
  --bs-primary-text-emphasis: #0B5A56;
  --bs-primary-bg-subtle: #E0EFEC;
  --bs-primary-border-subtle: #B9D9D4;
  --bs-secondary-text-emphasis: #3E4B4E;
  --bs-secondary-bg-subtle: #EDECE7;
  --bs-secondary-border-subtle: #DAD7CF;
  --bs-success-text-emphasis: #1B6A42;
  --bs-success-bg-subtle: #E2F2E8;
  --bs-success-border-subtle: #BFE0CB;
  --bs-info-text-emphasis: #1F5596;
  --bs-info-bg-subtle: #E5EEF8;
  --bs-info-border-subtle: #C2D5EE;
  --bs-warning-text-emphasis: #7F5307;
  --bs-warning-bg-subtle: #FDF1D8;
  --bs-warning-border-subtle: #F5DCA6;
  --bs-danger-text-emphasis: #B1261D;
  --bs-danger-bg-subtle: #FCE8E5;
  --bs-danger-border-subtle: #F3C4BE;
  --bs-light-text-emphasis: #4F5B5D;
  --bs-light-bg-subtle: #F7F6F2;
  --bs-light-border-subtle: #E6E3DC;
  --bs-dark-text-emphasis: #1A2B2E;
  --bs-dark-bg-subtle: #DAD7CF;
  --bs-dark-border-subtle: #B8B4AA;
}

/* ---------- Modo escuro (opcional, escolhido pela pessoa) ---------- */

[data-bs-theme=dark] {
  --bs-body-color: var(--sgl-texto);
  --bs-body-color-rgb: 228, 237, 236;
  --bs-body-bg: var(--sgl-fundo);
  --bs-body-bg-rgb: 14, 23, 25;
  --bs-emphasis-color: #FFFFFF;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--sgl-texto-2);
  --bs-secondary-color-rgb: 157, 176, 177;
  --bs-secondary-bg: var(--sgl-neutro-bg);
  --bs-secondary-bg-rgb: 29, 44, 47;
  --bs-tertiary-color: var(--sgl-texto-2);
  --bs-tertiary-color-rgb: 157, 176, 177;
  --bs-tertiary-bg: var(--sgl-suave);
  --bs-tertiary-bg-rgb: 17, 29, 32;
  --bs-link-color: var(--sgl-petroleo-escuro);
  --bs-link-color-rgb: 134, 217, 208;
  --bs-link-hover-color: var(--sgl-link-hover);
  --bs-link-hover-color-rgb: 176, 232, 225;
  --bs-code-color: var(--sgl-texto-2);
  --bs-border-color: var(--sgl-borda);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-focus-ring-color: var(--sgl-foco);
  --bs-primary: #4FBFB5;
  --bs-primary-rgb: 79, 191, 181;
  --bs-secondary: #9DB0B1;
  --bs-secondary-rgb: 157, 176, 177;
  --bs-success: #84D9A6;
  --bs-success-rgb: 132, 217, 166;
  --bs-info: #9CC2F5;
  --bs-info-rgb: 156, 194, 245;
  --bs-warning: #F2B441;
  --bs-warning-rgb: 242, 180, 65;
  --bs-danger: #FFA094;
  --bs-danger-rgb: 255, 160, 148;
  --bs-light: #1D2C2F;
  --bs-light-rgb: 29, 44, 47;
  --bs-dark: #E4EDEC;
  --bs-dark-rgb: 228, 237, 236;
  --bs-primary-text-emphasis: #86D9D0;
  --bs-primary-bg-subtle: #16393A;
  --bs-primary-border-subtle: #245452;
  --bs-secondary-text-emphasis: #C4D6D4;
  --bs-secondary-bg-subtle: #1D2C2F;
  --bs-secondary-border-subtle: #2F4246;
  --bs-success-text-emphasis: #84D9A6;
  --bs-success-bg-subtle: #12301F;
  --bs-success-border-subtle: #1F4A31;
  --bs-info-text-emphasis: #9CC2F5;
  --bs-info-bg-subtle: #162844;
  --bs-info-border-subtle: #243E66;
  --bs-warning-text-emphasis: #F7CF80;
  --bs-warning-bg-subtle: #352A13;
  --bs-warning-border-subtle: #54421D;
  --bs-danger-text-emphasis: #FFA094;
  --bs-danger-bg-subtle: #3B1816;
  --bs-danger-border-subtle: #5A2622;
  --bs-light-text-emphasis: #AFC0C1;
  --bs-light-bg-subtle: #111D20;
  --bs-light-border-subtle: #253639;
  --bs-dark-text-emphasis: #E4EDEC;
  --bs-dark-bg-subtle: #253639;
  --bs-dark-border-subtle: #3A4F53;
}

/* ---------- Tipografia ---------- */

::selection {
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-texto);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  line-height: 1.25;
}

/* Título das páginas (todas usam <h1 class="h3">): 30 px, extrabold. */
h1.h3 {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  h1.h3 {
    font-size: 1.5rem;
  }
}

.small,
small,
.form-text {
  letter-spacing: 0.01em;
}

code,
kbd,
samp,
.font-monospace,
.codigo {
  font-family: var(--bs-font-monospace);
}

/* Códigos de documento, série e lote: mono, com todos os caracteres distintos (O/0, I/l/1). */
.codigo {
  font-weight: 500;
  white-space: nowrap;
}

/* Números alinhados em coluna (algarismos tabulares). */
.table,
.num,
.display-6,
.fs-4 {
  font-variant-numeric: tabular-nums;
}

.display-6 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.text-warning {
  color: var(--sgl-ambar-texto) !important;
}

/* ---------- Estrutura: menu lateral, barra superior e conteúdo ---------- */

.app {
  display: flex;
  min-height: 100vh;
}

.app-principal {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.conteudo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 1.25rem 2.5rem;
}

@media (min-width: 768px) {
  .conteudo {
    padding: 2rem 2rem 3rem;
  }
}

.barra-superior {
  --sgl-fundo-logo: var(--sgl-superficie);
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--sgl-borda);
  background: var(--sgl-superficie);
}

@media (min-width: 768px) {
  .barra-superior {
    padding-inline: 2rem;
  }
}

.barra-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.botao-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-superficie);
  color: var(--bs-body-color);
  font-size: 1.15rem;
  text-decoration: none;
}

.botao-icone:hover {
  background: var(--sgl-suave);
  color: var(--bs-body-color);
}

/* Atalho do painel administrativo: ícone no celular, ícone e texto em telas largas. */
.botao-admin {
  gap: 0.45rem;
  width: auto;
  min-width: 2.75rem;
  padding: 0 0.8rem;
  color: var(--sgl-petroleo-escuro);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Entrada do sistema: atalho discreto para o painel administrativo. */
.entrada-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sgl-borda);
}

[data-bs-theme=dark] .so-claro,
[data-bs-theme=light] .so-escuro {
  display: none;
}

.grupo-tamanho {
  display: inline-flex;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-superficie);
}

.grupo-tamanho button {
  width: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-weight: 800;
  line-height: 1;
}

.grupo-tamanho .tamanho-menor {
  font-size: 0.875rem;
}

.grupo-tamanho .tamanho-maior {
  border-left: 1px solid var(--sgl-borda);
  font-size: 1.125rem;
}

.grupo-tamanho button:hover:not(:disabled) {
  background: var(--sgl-suave);
}

.grupo-tamanho button:disabled {
  opacity: 0.4;
}

.sino-contador {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--sgl-coral);
  color: var(--sgl-sobre-coral);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
}

.sino-contador.vencida {
  background: var(--sgl-erro);
  color: var(--sgl-sobre-erro);
}

.usuario {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 999px;
  background: var(--sgl-superficie);
  color: var(--bs-body-color);
  font-size: 0.9375rem;
  font-weight: 700;
}

.usuario:hover {
  background: var(--sgl-suave);
}

.usuario-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--sgl-ambar);
  color: var(--sgl-sobre-ambar);
  font-size: 0.8125rem;
  font-weight: 800;
}

.botao-icone:focus-visible,
.grupo-tamanho button:focus-visible,
.usuario:focus-visible,
.marca:focus-visible,
.sidebar-setor:focus-visible,
.sidebar-item:focus-visible {
  outline: 3px solid var(--sgl-petroleo);
  outline-offset: 2px;
}

/* Marca: "SGL" no quadrado petróleo, com o ponto coral (a única dose de coral fixa na tela). */
.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.marca-logo {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: var(--sgl-petroleo);
  color: var(--sgl-sobre-petroleo);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.marca-logo::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--sgl-fundo-logo, var(--sgl-superficie));
  border-radius: 999px;
  background: var(--sgl-coral);
}

.marca-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.marca-nome {
  color: var(--sgl-menu-texto-forte);
  font-size: 1.0625rem;
  font-weight: 800;
}

.marca-laboratorio {
  color: var(--sgl-menu-texto-2);
  font-size: 0.8125rem;
}

.sidebar {
  --sgl-fundo-logo: var(--sgl-menu);
  --bs-offcanvas-width: 18rem;
  --bs-offcanvas-bg: var(--sgl-menu);
  border-right: 1px solid var(--sgl-menu-borda);
  background-color: var(--sgl-menu);
  color: var(--sgl-menu-texto);
  scrollbar-color: var(--sgl-menu-borda) transparent;
  scrollbar-width: thin;
}

@media (min-width: 992px) {
  .sidebar.offcanvas-lg {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 17.5rem;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--sgl-menu) !important;
  }
}

.sidebar-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
}

.sidebar-rotulo {
  padding: 1rem 0.75rem 0.4rem;
  color: var(--sgl-menu-texto-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-setor {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  color: var(--sgl-menu-texto);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.sidebar-setor > .bi:first-child {
  font-size: 1.1rem;
}

.sidebar-setor .seta {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.sidebar-setor.collapsed .seta {
  transform: rotate(-90deg);
}

.sidebar-setor.contem-ativo {
  color: var(--sgl-menu-ativo-texto);
  font-weight: 700;
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem 0.45rem 2.55rem;
  border-radius: 0.625rem;
  color: var(--sgl-menu-texto);
  font-size: 0.9375rem;
  text-decoration: none;
}

.sidebar-setor:hover,
.sidebar-item:hover {
  background-color: var(--sgl-menu-hover);
  color: var(--sgl-menu-texto-forte);
}

.sidebar-setor.active,
.sidebar-item.active {
  background-color: var(--sgl-menu-ativo);
  box-shadow: inset 3px 0 0 var(--sgl-petroleo), var(--sgl-sombra);
  color: var(--sgl-menu-ativo-texto);
  font-weight: 700;
}

/* ---------- Componentes do Bootstrap na identidade do SGL ---------- */

.card {
  --sgl-fundo-logo: var(--sgl-superficie);
  --bs-card-bg: var(--sgl-superficie);
  --bs-card-border-color: var(--sgl-borda);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 0.9rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  box-shadow: var(--sgl-sombra);
}

.card-header {
  font-size: 1.125rem;
  font-weight: 700;
}

a.card:hover {
  border-color: var(--sgl-petroleo-borda);
  box-shadow: var(--sgl-sombra-alta);
}

/* Tabelas: listas ficam num "cartão" com cabeçalho em caixa alta (rótulos curtos, 13 px). */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--sgl-borda);
  --bs-table-hover-bg: var(--sgl-hover-linha);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--sgl-suave);
  --bs-table-striped-color: var(--bs-body-color);
  font-size: 0.9375rem;
}

.table > :not(caption) > * > * {
  padding: 0.75rem;
}

.table-sm > :not(caption) > * > * {
  padding: 0.4rem 0.5rem;
}

.table > thead th {
  background: var(--sgl-suave);
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table-responsive {
  border: 1px solid var(--sgl-borda);
  border-radius: 1rem;
  background: var(--sgl-superficie);
  box-shadow: var(--sgl-sombra);
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table-responsive > .table > :not(caption) > * > *:first-child {
  padding-left: 1.25rem;
}

.table-responsive > .table > :not(caption) > * > *:last-child {
  padding-right: 1.25rem;
}

.table-responsive > .table > tbody > tr:last-child > * {
  border-bottom: 0;
}

.card .table-responsive,
.modal .table-responsive {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tabela encostada na borda do cartão: acompanha os cantos arredondados, sem "quinas" para fora. */
.card > .table-responsive:first-child {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card > .table-responsive:last-child {
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* Linha de total (rodapé da tabela): destacada pelo filete, não por outra cor de fundo. */
.table > tfoot > tr > * {
  border-top: 2px solid var(--sgl-borda-forte);
  border-bottom: 0;
  background: transparent;
  font-weight: 700;
}

/* Selos: fundo suave e texto forte (contraste ≥ 4,5:1). Os de situação levam ícone,
   para a cor nunca ser o único sinal. */
.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.38em;
  --bs-badge-font-size: 0.8125rem;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 999px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Selo com texto longo dentro de cartão quebra a linha em vez de estourar a borda. */
.card-body .badge {
  max-width: 100%;
  text-align: start;
  white-space: normal;
}

.text-bg-primary {
  background-color: var(--sgl-petroleo-suave) !important;
  color: var(--sgl-petroleo-escuro) !important;
}

.text-bg-secondary,
.text-bg-light {
  background-color: var(--sgl-neutro-bg) !important;
  color: var(--sgl-neutro) !important;
}

.text-bg-success {
  background-color: var(--sgl-ok-bg) !important;
  color: var(--sgl-ok) !important;
}

.text-bg-warning {
  background-color: var(--sgl-atencao-bg) !important;
  color: var(--sgl-atencao) !important;
}

.text-bg-danger {
  background-color: var(--sgl-erro-bg) !important;
  color: var(--sgl-erro) !important;
}

.text-bg-info {
  background-color: var(--sgl-info-bg) !important;
  color: var(--sgl-info) !important;
}

.text-bg-dark {
  background-color: var(--sgl-texto) !important;
  color: var(--sgl-sobre-texto) !important;
}

.badge:not(.rounded-pill):not(:has(> .bi)):is(.text-bg-success, .text-bg-warning, .text-bg-danger, .text-bg-info)::before {
  margin-right: 0.35em;
  font-family: bootstrap-icons;
  font-weight: normal;
  vertical-align: -0.125em;
}

.badge:not(.rounded-pill):not(:has(> .bi)).text-bg-success::before { content: "\f26b"; }
.badge:not(.rounded-pill):not(:has(> .bi)).text-bg-warning::before { content: "\f293"; }
.badge:not(.rounded-pill):not(:has(> .bi)).text-bg-danger::before { content: "\f33b"; }
.badge:not(.rounded-pill):not(:has(> .bi)).text-bg-info::before { content: "\f431"; }

/* Botões: 15 px, negrito, cantos de 10 px. Cores pelos tokens, para o modo escuro trocar sozinho. */
.btn {
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-border-radius: 0.625rem;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Botão ao lado de um campo (filtros, busca, envio de arquivo) não quebra linha nem encolhe. */
.d-flex > .btn,
.input-group > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-sm {
  --bs-btn-font-size: 0.875rem;
  --bs-btn-padding-x: 0.65rem;
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-border-radius: 0.5rem;
}

.btn-lg {
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-border-radius: 0.75rem;
}

.btn-link {
  --bs-btn-font-weight: 600;
}

.btn-primary {
  --bs-btn-color: var(--sgl-sobre-petroleo);
  --bs-btn-bg: var(--sgl-petroleo);
  --bs-btn-border-color: var(--sgl-petroleo);
  --bs-btn-hover-color: var(--sgl-sobre-petroleo);
  --bs-btn-hover-bg: var(--sgl-petroleo-hover);
  --bs-btn-hover-border-color: var(--sgl-petroleo-hover);
  --bs-btn-active-color: var(--sgl-sobre-petroleo);
  --bs-btn-active-bg: var(--sgl-petroleo-hover);
  --bs-btn-active-border-color: var(--sgl-petroleo-hover);
  --bs-btn-disabled-color: var(--sgl-sobre-petroleo);
  --bs-btn-disabled-bg: var(--sgl-petroleo);
  --bs-btn-disabled-border-color: var(--sgl-petroleo);
}

.btn-success {
  --bs-btn-color: var(--sgl-sobre-ok);
  --bs-btn-bg: var(--sgl-ok);
  --bs-btn-border-color: var(--sgl-ok);
  --bs-btn-hover-color: var(--sgl-sobre-ok);
  --bs-btn-hover-bg: var(--sgl-ok-hover);
  --bs-btn-hover-border-color: var(--sgl-ok-hover);
  --bs-btn-active-color: var(--sgl-sobre-ok);
  --bs-btn-active-bg: var(--sgl-ok-hover);
  --bs-btn-active-border-color: var(--sgl-ok-hover);
  --bs-btn-disabled-color: var(--sgl-sobre-ok);
  --bs-btn-disabled-bg: var(--sgl-ok);
  --bs-btn-disabled-border-color: var(--sgl-ok);
}

.btn-danger {
  --bs-btn-color: var(--sgl-sobre-erro);
  --bs-btn-bg: var(--sgl-erro);
  --bs-btn-border-color: var(--sgl-erro);
  --bs-btn-hover-color: var(--sgl-sobre-erro);
  --bs-btn-hover-bg: var(--sgl-erro-hover);
  --bs-btn-hover-border-color: var(--sgl-erro-hover);
  --bs-btn-active-color: var(--sgl-sobre-erro);
  --bs-btn-active-bg: var(--sgl-erro-hover);
  --bs-btn-active-border-color: var(--sgl-erro-hover);
  --bs-btn-disabled-color: var(--sgl-sobre-erro);
  --bs-btn-disabled-bg: var(--sgl-erro);
  --bs-btn-disabled-border-color: var(--sgl-erro);
}

.btn-warning {
  --bs-btn-color: var(--sgl-sobre-ambar);
  --bs-btn-bg: var(--sgl-ambar);
  --bs-btn-border-color: var(--sgl-ambar);
  --bs-btn-hover-color: var(--sgl-sobre-ambar);
  --bs-btn-hover-bg: #E5A52E;
  --bs-btn-hover-border-color: #E5A52E;
  --bs-btn-active-color: var(--sgl-sobre-ambar);
  --bs-btn-active-bg: #E5A52E;
  --bs-btn-active-border-color: #E5A52E;
}

.btn-outline-primary {
  --bs-btn-color: var(--sgl-petroleo-escuro);
  --bs-btn-border-color: var(--sgl-petroleo);
  --bs-btn-hover-color: var(--sgl-sobre-petroleo);
  --bs-btn-hover-bg: var(--sgl-petroleo);
  --bs-btn-hover-border-color: var(--sgl-petroleo);
  --bs-btn-active-color: var(--sgl-sobre-petroleo);
  --bs-btn-active-bg: var(--sgl-petroleo-hover);
  --bs-btn-active-border-color: var(--sgl-petroleo-hover);
  --bs-btn-disabled-color: var(--sgl-petroleo-escuro);
  --bs-btn-disabled-border-color: var(--sgl-petroleo);
}

.btn-outline-success {
  --bs-btn-color: var(--sgl-ok);
  --bs-btn-border-color: var(--sgl-ok);
  --bs-btn-hover-color: var(--sgl-sobre-ok);
  --bs-btn-hover-bg: var(--sgl-ok);
  --bs-btn-hover-border-color: var(--sgl-ok);
  --bs-btn-active-color: var(--sgl-sobre-ok);
  --bs-btn-active-bg: var(--sgl-ok-hover);
  --bs-btn-active-border-color: var(--sgl-ok-hover);
  --bs-btn-disabled-color: var(--sgl-ok);
  --bs-btn-disabled-border-color: var(--sgl-ok);
}

.btn-outline-danger {
  --bs-btn-color: var(--sgl-erro);
  --bs-btn-border-color: var(--sgl-erro);
  --bs-btn-hover-color: var(--sgl-sobre-erro);
  --bs-btn-hover-bg: var(--sgl-erro);
  --bs-btn-hover-border-color: var(--sgl-erro);
  --bs-btn-active-color: var(--sgl-sobre-erro);
  --bs-btn-active-bg: var(--sgl-erro-hover);
  --bs-btn-active-border-color: var(--sgl-erro-hover);
  --bs-btn-disabled-color: var(--sgl-erro);
  --bs-btn-disabled-border-color: var(--sgl-erro);
}

/* Âmbar puro em texto sobre fundo claro não passa de 2:1; o contorno usa o âmbar escuro. */
.btn-outline-warning {
  --bs-btn-color: var(--sgl-ambar-texto);
  --bs-btn-border-color: var(--sgl-ambar);
  --bs-btn-hover-color: var(--sgl-sobre-ambar);
  --bs-btn-hover-bg: var(--sgl-ambar);
  --bs-btn-hover-border-color: var(--sgl-ambar);
  --bs-btn-active-color: var(--sgl-sobre-ambar);
  --bs-btn-active-bg: var(--sgl-ambar);
  --bs-btn-active-border-color: var(--sgl-ambar);
  --bs-btn-disabled-color: var(--sgl-ambar-texto);
  --bs-btn-disabled-border-color: var(--sgl-ambar);
}

.btn-outline-secondary {
  --bs-btn-color: var(--sgl-texto-2);
  --bs-btn-border-color: var(--sgl-borda-forte);
  --bs-btn-hover-color: var(--sgl-texto);
  --bs-btn-hover-bg: var(--sgl-neutro-bg);
  --bs-btn-hover-border-color: var(--sgl-borda-forte);
  --bs-btn-active-color: var(--sgl-texto);
  --bs-btn-active-bg: var(--sgl-neutro-bg);
  --bs-btn-active-border-color: var(--sgl-borda-forte);
  --bs-btn-disabled-color: var(--sgl-texto-2);
  --bs-btn-disabled-border-color: var(--sgl-borda);
}

.btn-secondary {
  --bs-btn-color: var(--sgl-sobre-texto);
  --bs-btn-bg: var(--sgl-texto-2);
  --bs-btn-border-color: var(--sgl-texto-2);
  --bs-btn-hover-color: var(--sgl-sobre-texto);
  --bs-btn-hover-bg: var(--sgl-texto);
  --bs-btn-hover-border-color: var(--sgl-texto);
}

/* Formulários: campo 16 px, borda com 3:1 de contraste, foco em petróleo. */
.form-control,
.form-select {
  border-color: var(--sgl-borda-forte);
  border-radius: 0.625rem;
  background-color: var(--sgl-campo);
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sgl-petroleo);
  background-color: var(--sgl-campo);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control-sm,
.form-select-sm {
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.form-control-lg {
  border-radius: 0.75rem;
  font-size: 1.0625rem;
}

.form-label,
.col-form-label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-check-input {
  border-color: var(--sgl-borda-forte);
  background-color: var(--sgl-campo);
}

.form-check-input:checked {
  border-color: var(--sgl-petroleo);
  background-color: var(--sgl-petroleo);
}

.form-check-input:focus {
  border-color: var(--sgl-petroleo);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.input-group-text {
  border-color: var(--sgl-borda-forte);
  background-color: var(--sgl-suave);
}

/* Campo obrigatório: o asterisco no coral, com um respiro do rótulo. */
.asteriskField {
  margin-left: 0.15em;
  color: var(--sgl-coral-texto);
  font-weight: 700;
}

/* Escolha de arquivo: o botão do navegador com a cara dos botões do SGL. */
.form-control::file-selector-button {
  margin-right: 0.85rem;
  border-inline-end: 1px solid var(--sgl-borda-forte);
  background-color: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
  font-weight: 700;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--sgl-petroleo-borda);
}

/* Blocos que abrem e fecham (<details>): seta que gira no lugar do triângulo do navegador. */
summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "\f285";
  flex-shrink: 0;
  color: var(--sgl-petroleo);
  font-family: bootstrap-icons;
  font-size: 0.8em;
  transition: rotate var(--sgl-rapida) var(--sgl-curva-mover);
}

details[open] > summary::before {
  rotate: 90deg;
}

summary:hover {
  color: var(--bs-link-hover-color);
}

summary:focus-visible {
  border-radius: 0.375rem;
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* <details> que é um cartão: o resumo tem o desenho do cabeçalho do cartão. */
details.card > summary {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  font-size: 1.125rem;
  font-weight: 700;
}

details.card[open] > summary {
  border-bottom: 1px solid var(--sgl-borda);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--sgl-superficie);
  --bs-dropdown-border-color: var(--sgl-borda);
  --bs-dropdown-border-radius: 0.75rem;
  --bs-dropdown-font-size: 0.9375rem;
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--sgl-suave);
  --bs-dropdown-link-active-color: var(--sgl-petroleo-escuro);
  --bs-dropdown-link-active-bg: var(--sgl-petroleo-suave);
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-padding-x: 0.4rem;
  box-shadow: var(--sgl-sombra-alta);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 0.5rem;
}

.modal {
  --bs-modal-bg: var(--sgl-superficie);
  --bs-modal-border-color: var(--sgl-borda);
  --bs-modal-border-radius: 1rem;
  --bs-modal-inner-border-radius: calc(1rem - 1px);
}

.modal-title {
  font-weight: 700;
}

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--sgl-borda);
  --bs-list-group-item-padding-x: 1.25rem;
  --bs-list-group-item-padding-y: 0.8rem;
  --bs-list-group-action-hover-bg: var(--sgl-suave);
  --bs-list-group-action-active-bg: var(--sgl-neutro-bg);
  --bs-list-group-active-color: var(--sgl-petroleo-escuro);
  --bs-list-group-active-bg: var(--sgl-petroleo-suave);
  --bs-list-group-active-border-color: var(--sgl-petroleo-borda);
}

.pagination {
  --bs-pagination-color: var(--sgl-petroleo-escuro);
  --bs-pagination-bg: var(--sgl-superficie);
  --bs-pagination-border-color: var(--sgl-borda);
  --bs-pagination-hover-color: var(--sgl-petroleo-escuro);
  --bs-pagination-hover-bg: var(--sgl-suave);
  --bs-pagination-hover-border-color: var(--sgl-borda);
  --bs-pagination-focus-color: var(--sgl-petroleo-escuro);
  --bs-pagination-focus-bg: var(--sgl-suave);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  --bs-pagination-active-color: var(--sgl-sobre-petroleo);
  --bs-pagination-active-bg: var(--sgl-petroleo);
  --bs-pagination-active-border-color: var(--sgl-petroleo);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--sgl-superficie);
  --bs-pagination-disabled-border-color: var(--sgl-borda);
}

.nav {
  --bs-nav-link-color: var(--sgl-petroleo-escuro);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-font-weight: 600;
}

.nav-pills {
  --bs-nav-pills-border-radius: 0.625rem;
  --bs-nav-pills-link-active-color: var(--sgl-sobre-petroleo);
  --bs-nav-pills-link-active-bg: var(--sgl-petroleo);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--sgl-borda);
  --bs-nav-tabs-link-hover-border-color: var(--sgl-borda) var(--sgl-borda) var(--sgl-borda);
  --bs-nav-tabs-link-active-color: var(--bs-body-color);
  --bs-nav-tabs-link-active-bg: var(--sgl-superficie);
  --bs-nav-tabs-link-active-border-color: var(--sgl-borda) var(--sgl-borda) var(--sgl-superficie);
}

.progress {
  --bs-progress-height: 0.6rem;
  --bs-progress-bg: var(--sgl-neutro-bg);
  --bs-progress-bar-bg: var(--sgl-petroleo);
  --bs-progress-border-radius: 999px;
}

.accordion {
  --bs-accordion-bg: var(--sgl-superficie);
  --bs-accordion-border-color: var(--sgl-borda);
  --bs-accordion-border-radius: 1rem;
  --bs-accordion-inner-border-radius: calc(1rem - 1px);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  --bs-accordion-active-color: var(--sgl-petroleo-escuro);
  --bs-accordion-active-bg: var(--sgl-petroleo-suave);
}

.alert {
  --bs-alert-border-radius: 0.75rem;
}

/* ---------- Layout das páginas ----------
   Estrutura clássica e previsível (menu à esquerda, barra no topo), poucos grupos bem definidos,
   espaço em branco generoso e o mesmo espaçamento em todas as telas (README, "Identidade visual"). */

/* Em monitores muito largos o conteúdo não se espalha: margens ajudam a leitura. */
.conteudo-interno {
  max-width: 100rem;
  margin-inline: auto;
}

/* Cabeçalho de página: trilha → título (com selo) → dados → ações à direita. As telas já seguem
   essa ordem; aqui a trilha, o título e a descrição ganham o mesmo desenho e o mesmo respiro. */
.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0.6rem;
  --bs-breadcrumb-font-size: 0.875rem;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "\f285";
  font-family: bootstrap-icons;
  font-size: 0.75em;
  vertical-align: 0.05em;
}

.breadcrumb a {
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.cabecalho-pagina,
.conteudo-interno > div:has(> h1.h3):not(:has(+ p)) {
  margin-bottom: 1.5rem !important;
}

/* Descrição logo abaixo do título: linha de leitura confortável (até ~75 caracteres). */
.conteudo-interno > p.text-body-secondary:not(.vazio) {
  max-width: 75ch;
  margin-bottom: 1.5rem;
}

.texto-livre {
  max-width: 75ch;
}

/* Barra de filtros das listas: um grupo só, dentro de uma região comum (Palmer, 1992). */
.conteudo-interno form.row[method="get"] {
  --bs-gutter-y: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0.5rem 0.75rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 1rem;
  background: var(--sgl-superficie);
  box-shadow: var(--sgl-sombra);
}

/* Total de registros e paginação, abaixo das listas. */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Lista vazia: ícone e frase no lugar de um texto solto. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1.25rem;
  border: 1px dashed var(--sgl-petroleo-borda);
  border-radius: 1rem;
  background: var(--sgl-suave);
  text-align: center;
}

.vazio::before {
  content: "\f42d";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
  font-family: bootstrap-icons;
  font-size: 1.5rem;
}

/* Seções (painel): título com ícone do setor e, à direita, o atalho "Ver todas". */
.secao {
  margin-bottom: 2rem;
}

.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.secao-cabecalho .secao-titulo {
  margin-bottom: 0;
}

.secao-titulo .bi {
  color: var(--sgl-petroleo);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  text-decoration: none;
}

/* Seções do painel numa grade de 3 colunas: cada seção ocupa tantas colunas quantos cartões tem
   (até 3), e seções pequenas ficam lado a lado. Os cartões dos módulos vêm com "col-md-4"; aqui
   dentro quem manda é a grade da seção. */
.secoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
}

.secao-cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

/* Seções lado a lado: os cartões da mesma linha da grade terminam na mesma altura. */
.secoes > .secao {
  display: flex;
  flex-direction: column;
}

.secoes > .secao > .secao-cartoes {
  flex: 1 1 auto;
}

.secao-cartoes > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .secoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .secao-2,
  .secao-3 {
    grid-column: span 2;
  }

  .secao-2 .secao-cartoes,
  .secao-3 .secao-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .secoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .secao-3 {
    grid-column: span 3;
  }

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

/* Indicador (número grande com rótulo); vencida e atenção levam ícone, não só cor. */
.kpi-rotulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 700;
}

.kpi-valor {
  margin-top: 0.35rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.kpi-erro .kpi-rotulo,
.kpi-erro .kpi-valor {
  color: var(--sgl-erro);
}

.kpi-atencao .kpi-rotulo,
.kpi-atencao .kpi-valor {
  color: var(--sgl-atencao);
}

/* No celular, cada indicador é uma linha: rótulo à esquerda e número à direita. */
@media (max-width: 575.98px) {
  .kpi .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.8rem;
  }

  .kpi .kpi-valor {
    margin-top: 0;
    font-size: 1.5rem;
  }
}

/* ---------- Painel ---------- */

.painel .card h2.h6 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
}

.painel .card h2.h6 > .bi {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro) !important;
  font-size: 1.05rem;
}

.painel .card p.fs-4 {
  font-weight: 800;
}

.painel .card p.fs-4 > .fs-6 {
  font-weight: 400;
}

/* Faixa de conquista: a dose de coral, só quando há algo real para comemorar. */
.conquista {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--sgl-coral-borda);
  border-radius: 1rem;
  background: var(--sgl-coral-suave);
}

.conquista-icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.75rem;
  background: var(--sgl-coral);
  color: var(--sgl-sobre-coral);
  font-size: 1.35rem;
}

.conquista-titulo {
  font-weight: 800;
}

.conquista-texto {
  color: var(--sgl-coral-texto);
  font-size: 0.875rem;
}

.conquista-numero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--sgl-coral-texto);
  line-height: 1.2;
  text-align: right;
}

.conquista-numero .num {
  font-size: 1.875rem;
  font-weight: 800;
}

.conquista-numero span:last-child {
  font-size: 0.8125rem;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .conquista-numero {
    display: none;
  }
}

/* ---------- Páginas públicas: entrada, verificação de assinatura e erros ---------- */

.publico {
  background: var(--sgl-fundo);
}

.entrada {
  max-width: 58rem;
  overflow: hidden;
}

.entrada-marca {
  --sgl-fundo-logo: var(--sgl-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  border-right: 1px solid var(--sgl-menu-borda);
  background: var(--sgl-menu);
  color: var(--sgl-menu-texto);
}

.marca-logo-grande {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
}

.entrada-titulo {
  margin-bottom: 0.35rem;
  color: var(--sgl-menu-texto-forte);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
}

.entrada-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  font-weight: 600;
  list-style: none;
}

.entrada-lista .bi {
  margin-right: 0.5rem;
  color: var(--sgl-petroleo);
  font-size: 1.1rem;
}

@media (max-width: 767.98px) {
  .entrada-marca {
    padding: 1.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--sgl-menu-borda);
  }

  .entrada-lista {
    display: none;
  }
}

/* ---------- Conteúdo específico ---------- */

/* Textos digitados pelo usuário: mantém as quebras de linha. */
.texto-livre {
  white-space: pre-line;
}

/* Gráfico de barras simples (só HTML e CSS): uma coluna por mês. */
.grafico-barras {
  display: flex;
  gap: 0.4rem;
}

.grafico-barras .mes {
  flex: 1;
  text-align: center;
}

.grafico-barras .barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 8rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.grafico-barras .barra {
  width: 40%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
}

.barra.atual,
.legenda.atual {
  background-color: var(--bs-primary);
}

.barra.anterior,
.legenda.anterior {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
}

.legenda {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  vertical-align: middle;
}

/* Gráficos de linha (controle ambiental). Uma série por gráfico, na cor do slot 1 da paleta de
   referência; leituras fora do limite no vermelho de status "crítico", sempre com
   ícone e texto. No modo escuro, os passos escuros da mesma paleta (validados para fundo escuro). */
.grafico-linha {
  --serie: #2a78d6;
  --critico: #d03b3b;
  --grade: #e1e0d9;
  --eixo: #898781;
  --superficie: var(--bs-body-bg);
}

[data-bs-theme=dark] .grafico-linha {
  --serie: #3987e5;
  --grade: #2c2c2a;
  --eixo: #898781;
}

.grafico-linha svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.grafico-linha .grade { stroke: var(--grade); stroke-width: 1; }
.grafico-linha .limite { stroke: var(--eixo); stroke-width: 1; stroke-dasharray: 4 3; }
.grafico-linha .serie { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha .mira { stroke: var(--eixo); stroke-width: 1; }
.grafico-linha .ponto { fill: var(--serie); stroke: var(--superficie); stroke-width: 2; }
.grafico-linha .ponto.fora { fill: var(--critico); }
.grafico-linha .eixo { fill: var(--bs-secondary-color); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-linha .rotulo-ponto { fill: var(--bs-body-color); font-size: 11px; font-weight: 600; }
.grafico-linha .alvo { fill: transparent; cursor: crosshair; }
.grafico-linha .alvo:focus { outline: none; }
.grafico-linha .alvo:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* Várias séries (indicador da intralaboratorial): os slots categóricos da paleta de referência, sempre
   na mesma ordem. A cor segue o técnico; a tabela de En abaixo do gráfico traz os valores. */
.s1 { --serie: #2a78d6; }
.s2 { --serie: #eb6834; }
.s3 { --serie: #1baf7a; }
.s4 { --serie: #eda100; }
.s5 { --serie: #e87ba4; }
.s6 { --serie: #008300; }
.s7 { --serie: #4a3aa7; }
.s8 { --serie: #e34948; }

[data-bs-theme=dark] .s1 { --serie: #3987e5; }
[data-bs-theme=dark] .s2 { --serie: #d95926; }
[data-bs-theme=dark] .s3 { --serie: #199e70; }
[data-bs-theme=dark] .s4 { --serie: #c98500; }
[data-bs-theme=dark] .s5 { --serie: #d55181; }
[data-bs-theme=dark] .s6 { --serie: #008300; }
[data-bs-theme=dark] .s7 { --serie: #9085e9; }
[data-bs-theme=dark] .s8 { --serie: #e66767; }

.chip-serie {
  display: inline-block;
  width: 1rem;
  height: 0.2rem;
  border-radius: 2px;
  background: var(--serie);
  vertical-align: middle;
}

.dica-grafico {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--sgl-borda);
  border-radius: var(--bs-border-radius);
  background: var(--sgl-superficie);
  box-shadow: var(--sgl-sombra);
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Ficha controlada (registros com fluxo) ----------
   O registro aparece como o formulário do SG que ele substitui: faixa com código e revisão, número em mono,
   régua das etapas, quem age agora, seções numeradas, quadro de assinaturas e trilha. Familiar para quem
   preenche e para quem audita (os formulários em papel são o modelo mental; Roth et al., 2010) e com a
   situação sempre visível. Peças em templates/partials/ficha_*.html, regua.html e assinaturas.html. */

.ficha {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.ficha-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid var(--sgl-menu-borda);
  background: var(--sgl-menu);
  color: var(--sgl-menu-texto);
  font-size: 0.875rem;
}

.ficha-faixa-formulario {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.ficha-faixa-formulario .codigo {
  color: var(--sgl-petroleo-escuro);
  font-weight: 600;
  text-decoration: none;
}

.ficha-faixa-titulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ficha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.35rem 1.5rem 1rem;
}

.ficha-numero {
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.ficha-numero .complemento {
  font-family: var(--sgl-fonte);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

/* Registros identificados por nome (provedor, equipamento, pessoa): o nome no lugar do número. */
.ficha-nome {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.ficha-assunto {
  margin: 0.4rem 0 0.15rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.ficha-meta {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  .ficha-numero {
    font-size: 1.75rem;
  }

  .ficha-nome {
    font-size: 1.4rem;
  }

  .ficha-faixa,
  .ficha-topo {
    padding-inline: 1.1rem;
  }
}

/* Régua das etapas: feita (preenchida, com ✓), atual (anel), futura (número), pulada (–) e
   interrompida (✕). Indicador de progresso discreto, sem animação (Myers, 1985; Conrad et al., 2010). */
.regua {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0.35rem 1rem 1.25rem;
  list-style: none;
}

.regua-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.35rem;
  text-align: center;
}

.regua-passo::before {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(50% + 20px);
  left: calc(-50% + 20px);
  height: 2px;
  background: var(--sgl-borda);
}

.regua-passo:first-child::before {
  display: none;
}

.regua-passo:is(.feita, .atual, .interrompida, .pulada)::before {
  background: var(--sgl-petroleo);
}

.regua-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--sgl-borda-forte);
  border-radius: 999px;
  background: var(--sgl-superficie);
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 800;
}

.feita .regua-marca {
  border-color: var(--sgl-petroleo);
  background: var(--sgl-petroleo);
  color: var(--sgl-sobre-petroleo);
}

.atual .regua-marca {
  border-color: var(--sgl-petroleo);
  box-shadow: 0 0 0 5px var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
}

.interrompida .regua-marca {
  border-color: var(--sgl-neutro);
  background: var(--sgl-neutro-bg);
  color: var(--sgl-neutro);
}

.pulada .regua-marca {
  border-style: dashed;
  border-color: var(--sgl-petroleo);
  color: var(--sgl-petroleo-escuro);
}

.regua-nome {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.atual .regua-nome {
  color: var(--sgl-petroleo-escuro);
}

.futura .regua-nome {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.regua-quando {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.atual .regua-quando {
  color: var(--sgl-petroleo-escuro);
  font-weight: 700;
}

.regua-resumo {
  display: none;
}

@media (max-width: 575.98px) {
  .regua-passo :is(.regua-nome, .regua-quando) {
    display: none;
  }

  .regua {
    padding-bottom: 0.75rem;
  }

  .regua-resumo {
    display: block;
    margin: 0 1.1rem 1rem;
    color: var(--sgl-petroleo-escuro);
    font-size: 0.875rem;
    text-align: center;
  }
}

/* Quem age agora: "Sua vez" (com as ações), "Aguardando" (quem e o que falta) ou "Registro encerrado". */
.ficha-vez {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--sgl-menu-borda);
  background: color-mix(in srgb, var(--sgl-petroleo-suave) 45%, var(--sgl-superficie));
}

.ficha-vez-texto {
  display: flex;
  flex: 1 1 22rem;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.ficha-vez-icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--sgl-petroleo);
  color: var(--sgl-sobre-petroleo);
  font-size: 1.1rem;
}

.ficha-vez.aguardando .ficha-vez-icone {
  background: var(--sgl-ambar-suave);
  color: var(--sgl-ambar-texto);
}

.ficha-vez.encerrada {
  background: var(--sgl-suave);
}

.ficha-vez.encerrada .ficha-vez-icone,
.ficha-vez.situacao .ficha-vez-icone {
  background: var(--sgl-neutro-bg);
  color: var(--sgl-neutro);
}

/* Etapa estável (em vigor, homologado...) ou registro sem régua: informa, sem chamar para ação. */
.ficha-vez:is(.estavel, .situacao) {
  background: var(--sgl-suave);
}

.ficha-vez.estavel .ficha-vez-icone {
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
}

/* Bloqueio de uso (equipamento vencido ou sem certificado): o vermelho fica só no ícone. */
.ficha-vez.bloqueado {
  background: var(--sgl-suave);
}

.ficha-vez.bloqueado .ficha-vez-icone {
  background: var(--sgl-erro-bg);
  color: var(--sgl-erro);
}

.ficha-vez-titulo {
  font-weight: 800;
}

.ficha-vez-detalhe {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.ficha-vez-acoes {
  flex: 0 1 auto;
}

/* Corpo da ficha: uma folha só, com as seções numeradas como no formulário em papel. */
.folha-secoes {
  overflow: hidden;
}

.secao-ficha {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 1.1rem;
  padding: 1.35rem 1.5rem;
  border-top: 1px solid var(--sgl-borda);
}

.secao-ficha:first-child {
  border-top: 0;
}

.secao-ficha.atual {
  background: color-mix(in srgb, var(--sgl-petroleo-suave) 30%, var(--sgl-superficie));
}

.secao-ficha.futura {
  padding-block: 1rem;
}

.secao-ficha-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
  font-family: var(--bs-font-monospace);
  font-size: 0.9375rem;
  font-weight: 600;
}

.secao-ficha.atual .secao-ficha-num {
  background: var(--sgl-petroleo);
  color: var(--sgl-sobre-petroleo);
}

.secao-ficha.futura .secao-ficha-num {
  background: var(--sgl-neutro-bg);
  color: var(--sgl-neutro);
  font-size: 0.8125rem;
}

.secao-ficha-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-height: 2.25rem;
  margin-bottom: 0.75rem;
}

.secao-ficha.futura .secao-ficha-cabecalho {
  margin-bottom: 0.15rem;
}

.secao-ficha-titulo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
}

.secao-ficha.futura .secao-ficha-titulo {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  font-weight: 700;
}

.secao-ficha h3 {
  margin: 1.25rem 0 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.secao-ficha-formulario {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-suave);
}

/* Campos "rótulo ........ valor", com linha pontilhada como nos formulários impressos. */
.campos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.campos > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 0.75rem;
}

.campos dt {
  display: flex;
  align-items: baseline;
  color: var(--bs-secondary-color);
  font-weight: 700;
}

.campos dt::after {
  content: "";
  flex-grow: 1;
  min-width: 1rem;
  margin-left: 0.5rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--sgl-borda-forte) 45%, transparent);
  translate: 0 -0.3em;
}

.campos dd {
  margin: 0;
}

@media (max-width: 575.98px) {
  .campos > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .campos dt::after {
    content: none;
  }
}

.texto-destacado {
  padding: 0.85rem 1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.625rem;
  background: var(--sgl-suave);
}

/* Vínculos do registro (MRC, reclamação, risco...): etiquetas clicáveis com a situação de cada um. */
.vinculos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vinculo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem 0.45rem 0.8rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.625rem;
  background: var(--sgl-superficie);
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

a.vinculo:hover {
  border-color: var(--sgl-petroleo-borda);
  background: var(--sgl-suave);
  color: var(--bs-body-color);
}

/* "Atende a": requisitos da norma e procedimentos que o registro cumpre. */
.requisitos {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 1rem 1.25rem 1.1rem;
  list-style: none;
}

.requisitos li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.requisito-codigo {
  color: var(--sgl-petroleo-escuro);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: normal;
}

.requisito-fonte {
  display: block;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

/* Trilha do registro: linha do tempo com marcadores; a ação assinada leva o código de verificação. */
.trilha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 0 0 0 1.35rem;
  list-style: none;
}

.trilha::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.3rem;
  width: 2px;
  background: var(--sgl-borda);
}

.trilha-evento {
  position: relative;
}

.trilha-evento::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: -1.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--sgl-superficie);
  border-radius: 999px;
  background: var(--sgl-petroleo);
  box-shadow: 0 0 0 1px var(--sgl-petroleo-borda);
}

.trilha-evento.assinado::before {
  background: var(--sgl-ok);
}

.trilha-titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.trilha-meta,
.trilha-assinatura,
.trilha-vazia {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.trilha-comentario {
  margin-top: 0.2rem;
  font-size: 0.875rem;
}

.trilha-nota {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sgl-borda);
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

/* Quadro de assinaturas: nome sobre a linha, como no papel; a pendente tem a linha tracejada. */
.quadro-assinaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.assinatura {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.25rem 1.1rem;
  border-top: 1px solid var(--sgl-borda);
  border-right: 1px solid var(--sgl-borda);
  margin: 0 -1px -1px 0;
}

.assinatura-linha {
  margin-bottom: 0.35rem;
  padding: 1rem 0 0.2rem;
  border-bottom: 1.5px solid var(--bs-body-color);
  font-size: 1.0625rem;
  font-weight: 800;
}

.assinatura.pendente .assinatura-linha {
  border-bottom-style: dashed;
  border-bottom-color: var(--sgl-borda-forte);
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: italic;
}

.assinatura-papel {
  font-size: 0.875rem;
  font-weight: 700;
}

.assinatura-meta {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

/* ---------- Livro de registros (listas com fluxo, ex.: controle de não conformidades) ---------- */

/* Sobre o título da lista: o formulário de controle que ela substitui. */
.cabecalho-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selo-formulario {
  padding: 0.1rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--sgl-petroleo-suave);
  color: var(--sgl-petroleo-escuro);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.livro-etapa.ativa {
  box-shadow: inset 0 -3px 0 var(--sgl-petroleo);
}

.livro-etapas {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.livro-etapa {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border-right: 1px solid var(--sgl-borda);
  color: var(--bs-body-color);
  text-decoration: none;
}

.livro-etapa:last-child {
  border-right: 0;
}

a.livro-etapa:hover {
  background: var(--sgl-suave);
  color: var(--bs-body-color);
}

.livro-etapa.com-itens {
  background: color-mix(in srgb, var(--sgl-petroleo-suave) 40%, var(--sgl-superficie));
}

.livro-etapa-nome {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.livro-etapa-total {
  font-family: var(--bs-font-monospace);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.livro-etapa:not(.com-itens) .livro-etapa-total {
  color: var(--bs-secondary-color);
}

.livro {
  overflow: hidden;
}

.livro-cabecalho,
.livro-linha {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 13rem 12rem;
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 1.5rem;
}

.livro-cabecalho {
  padding-block: 0.7rem;
  background: var(--sgl-suave);
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.livro-linha {
  border-top: 1px solid var(--sgl-borda);
  color: var(--bs-body-color);
  text-decoration: none;
}

a.livro-linha:hover {
  background: var(--sgl-hover-linha);
  color: var(--bs-body-color);
}

.livro-numero {
  font-family: var(--bs-font-monospace);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.livro-data {
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
}

.livro-origem {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 700;
}

.livro-etapa-atual {
  font-size: 0.875rem;
  font-weight: 700;
}

.livro-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--sgl-borda);
  background: var(--sgl-suave);
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

/* Mini régua da lista: feita (petróleo), atual (âmbar com contorno), futura (cinza) e a etapa em texto. */
.mini-regua {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  margin-top: 0.35rem;
}

.mini-regua span {
  height: 6px;
  border-radius: 3px;
  background: var(--sgl-neutro-bg);
}

.mini-regua .feita {
  background: var(--sgl-petroleo);
}

.mini-regua .atual {
  background: var(--sgl-ambar);
  box-shadow: 0 0 0 1.5px var(--sgl-ambar-texto);
}

@media (max-width: 991.98px) {
  .livro-cabecalho {
    display: none;
  }

  .livro-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .livro-etapas {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .livro-etapa {
    border-bottom: 1px solid var(--sgl-borda);
  }
}

/* ---------- Painel: mesa de trabalho ----------
   Primeiro o que é da pessoa agora ("Sua vez", do mais urgente ao mais tranquilo) e o que um auditor
   encontraria hoje; depois as faixas dos módulos (esteira do laboratório, indicadores) e os setores. */

.painel-data {
  margin-bottom: 0.2rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.faixa-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1.1rem 1.35rem 0.85rem;
}

.faixa-painel {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.faixa-painel .faixa-cabecalho {
  border-bottom: 1px solid var(--sgl-borda);
}

.painel-divisao {
  margin: 0.5rem 0 1rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sua vez: grupos (vencidas, próximos dias, depois) e uma linha por pendência. */
.sua-vez-grupo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem 0.4rem;
}

.sua-vez-grupo h3 {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sua-vez-grupo.vencidas h3 {
  color: var(--sgl-erro);
}

.sua-vez-grupo.em-breve h3 {
  color: var(--sgl-atencao);
}

.sua-vez-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarefa {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.35rem;
  border-top: 1px solid var(--sgl-borda);
  color: var(--bs-body-color);
  text-decoration: none;
}

.tarefa:hover {
  background: var(--sgl-hover-linha);
  color: var(--bs-body-color);
}

.tarefa-prazo {
  display: flex;
  flex-direction: column;
  font-family: var(--bs-font-monospace);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.vencidas + .sua-vez-lista .tarefa-prazo {
  color: var(--sgl-erro);
}

.em-breve + .sua-vez-lista .tarefa-prazo {
  color: var(--sgl-atencao);
}

.tarefa-quando {
  color: var(--bs-secondary-color);
  font-family: var(--sgl-fonte);
  font-size: 0.8125rem;
  font-weight: 400;
}

.tarefa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tarefa-titulo {
  font-weight: 700;
  line-height: 1.35;
}

.tarefa-origem {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.tarefa > .bi {
  color: var(--bs-secondary-color);
}

.sua-vez-mais {
  display: block;
  padding: 0.5rem 1.35rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .tarefa {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tarefa-prazo {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0.5rem;
    align-items: baseline;
  }
}

/* Prontidão para auditoria: marcador (✕ resolver, ! atenção, ✓ em dia), texto e o formulário em mono. */
.prontidao-resumo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 1.35rem 0.85rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.sinais {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sinal {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 1.35rem;
  border-top: 1px solid var(--sgl-borda);
  color: var(--bs-body-color);
  text-decoration: none;
}

.sinal:hover {
  background: var(--sgl-hover-linha);
  color: var(--bs-body-color);
}

.sinal-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

.sinal-marca.erro {
  background: var(--sgl-erro-bg);
  color: var(--sgl-erro);
}

.sinal-marca.atencao {
  background: var(--sgl-atencao-bg);
  color: var(--sgl-atencao);
}

.sinal-marca.ok {
  background: var(--sgl-ok-bg);
  color: var(--sgl-ok);
}

.sinal-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sinal-texto {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.sinal-detalhe {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.sinal-codigo {
  padding-top: 0.15rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

/* Esteira do laboratório: uma coluna por prateleira, a maior fila em âmbar. */
.esteira {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esteira li + li {
  border-left: 1px solid var(--sgl-borda);
}

.esteira-estagio {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.95rem 1rem 1rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.esteira-estagio:hover {
  background: var(--sgl-hover-linha);
  color: var(--bs-body-color);
}

.esteira-estagio.com-itens {
  background: color-mix(in srgb, var(--sgl-petroleo-suave) 40%, var(--sgl-superficie));
  color: var(--bs-body-color);
}

.esteira-estagio.destaque {
  background: var(--sgl-ambar-suave);
}

.esteira-total {
  font-family: var(--bs-font-monospace);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.esteira-rotulo {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.esteira-nota {
  color: var(--sgl-ambar-texto);
  font-size: 0.8125rem;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .esteira {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

  .esteira li + li {
    border-left: 0;
  }

  .esteira li {
    border-bottom: 1px solid var(--sgl-borda);
  }
}

/* Indicadores do SG: trabalho não conforme, RNC de reclamação, objetivos na meta e os que estão fora. */
.indicadores-faixa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.indicador {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1rem 1.35rem 1.1rem;
  border-right: 1px solid var(--sgl-borda);
  margin-right: -1px;
}

.indicador-rotulo {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 700;
}

.indicador-valor {
  font-family: var(--bs-font-monospace);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
}

/* ---------- Busca por número (barra superior) ---------- */

.busca-registro {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.6rem;
  max-width: 32rem;
  height: 2.75rem;
  padding: 0 0.6rem 0 0.85rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-fundo);
  color: var(--bs-secondary-color);
}

.busca-registro:focus-within {
  border-color: var(--sgl-petroleo);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.busca-registro input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.9375rem;
}

.busca-registro input::placeholder {
  color: var(--bs-secondary-color);
}

.atalho {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--sgl-borda-forte);
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Código do documento do SG ao lado de cada item do menu (configurável): o sistema e o SG falam a mesma língua. */
.sidebar-item .codigo {
  flex-shrink: 0;
  color: var(--sgl-menu-texto-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

.sidebar-item.active .codigo {
  color: var(--sgl-menu-ativo-texto);
}

/* Link no título da página (ex.: o cliente da proposta): sem o sublinhado grosso; ele volta ao passar o mouse. */
h1 a:not(:hover) {
  text-decoration: none;
}

/* Indicadores soltos nas telas (rótulo pequeno sobre um número): o mesmo desenho dos do painel. */
.card-body > .small.text-body-secondary:first-child:has(+ :is(.fs-3, .fs-4)) {
  font-size: 0.875rem;
  font-weight: 700;
}

.card-body > :is(.small.text-body-secondary, .badge):first-child + :is(.fs-3, .fs-4) {
  margin-top: 0.3rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Matriz de autorizações: nomes das atividades sem caixa alta (são longos) e a coluna do colaborador
   fixa à esquerda ao rolar para o lado. */
.tabela-matriz > thead th {
  min-width: 7.5rem;
  vertical-align: bottom;
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.tabela-matriz > :is(thead, tbody) > tr > th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  background: var(--sgl-superficie);
  box-shadow: inset -1px 0 0 var(--sgl-borda);
}

.tabela-matriz > thead > tr > th:first-child {
  background: var(--sgl-suave);
}

/* Prateleiras: as colunas quebram em linhas, para ver todas sem rolar para o lado. */
.prateleiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem 1rem;
}

.prateleira-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--sgl-petroleo-borda);
  font-size: 1rem;
  font-weight: 700;
}

/* Celular: cada linha da tabela vira um bloco, com o nome da coluna ao lado de cada valor
   (interface.js copia o cabeçalho para as células e marca a tabela). Nada de rolar para o lado
   nem de linhas altíssimas com uma palavra por linha. A primeira coluna vira o título do bloco. */
@media (max-width: 575.98px) {
  .tabela-empilhada > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabela-empilhada,
  .tabela-empilhada > tbody,
  .tabela-empilhada > tbody > tr {
    display: block;
    width: 100%;
  }

  .tabela-empilhada > tbody > tr {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--sgl-borda);
  }

  .tabela-empilhada > tbody > tr:last-child {
    border-bottom: 0;
  }

  .table.tabela-empilhada > tbody > tr > * {
    position: relative;
    display: block;
    width: 100%;
    min-height: 1.5rem;
    padding: 0.2rem 0 0.2rem calc(40% + 0.75rem) !important;
    border: 0;
    text-align: start !important;
    white-space: normal !important;
  }

  .tabela-empilhada > tbody > tr > *::before {
    content: attr(data-rotulo);
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 40%;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .table.tabela-empilhada > tbody > tr > :is(:first-child, [data-rotulo=""], :not([data-rotulo])) {
    padding-left: 0 !important;
  }

  .tabela-empilhada > tbody > tr > :is(:first-child, [data-rotulo=""], :not([data-rotulo]))::before {
    content: none;
  }

  .table.tabela-empilhada > tbody > tr > :first-child {
    margin-bottom: 0.3rem;
    font-size: 1rem;
    font-weight: 700;
  }
}

/* Alpine.js: esconde o bloco até o script decidir se ele aparece. */
[x-cloak] {
  display: none !important;
}

/* ---------- Movimento (animações sutis) ----------
   Só quando explica algo: de onde veio, o que mudou, se o clique funcionou (Tversky et al., 2002).
   Curto (0,15 a 0,4 s), de uma vez e disparado pela pessoa: nada piscando ou pulsando o tempo todo,
   porque o início de um movimento rouba a atenção (Abrams e Christ, 2003; Bartram et al., 2003).
   Entra desacelerando, sai acelerando e move "devagar, rápido, devagar" (Dragicevic et al., 2011).
   Desloca com as propriedades translate/scale (não transform), para não brigar com o Bootstrap.
   Com "reduzir movimento" ligado no sistema, fica só o esmaecimento (WCAG 2.3.3). */


@keyframes sgl-surgir {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

@keyframes sgl-surgir-menu {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

@keyframes sgl-esmaecer {
  from {
    opacity: 0;
  }
}

@keyframes sgl-estrela {
  0% {
    opacity: 0;
    rotate: -15deg;
    scale: 0.6;
  }

  60% {
    opacity: 1;
    rotate: 4deg;
    scale: 1.08;
  }

  100% {
    rotate: 0deg;
    scale: 1;
  }
}

@keyframes sgl-girar {
  to {
    rotate: 360deg;
  }
}

/* Página nova: o conteúdo esmaece e sobe 6 px, uma vez (mostrar a tela nova cedo faz a troca
   parecer mais rápida; Huhtala et al., 2010). "backwards": ao terminar não sobra deslocamento,
   e as janelas (modais), que são fixas, continuam no lugar certo. */
.conteudo-interno,
.publico main > * {
  animation: sgl-surgir var(--sgl-media) var(--sgl-curva-entrar) backwards;
}

/* Resposta ao mouse e ao clique: cor e sombra; o botão "afunda" 2% ao ser pressionado. */
.btn {
  transition: color var(--sgl-rapida) ease, background-color var(--sgl-rapida) ease,
    border-color var(--sgl-rapida) ease, box-shadow var(--sgl-rapida) ease,
    scale var(--sgl-rapida) var(--sgl-curva-mover);
}

.btn:active:not(:disabled) {
  scale: 0.98;
}

.sidebar-setor,
.sidebar-item,
.botao-icone,
.usuario,
.grupo-tamanho button,
.dropdown-item,
.page-link,
.list-group-item-action {
  transition: background-color var(--sgl-rapida) ease, color var(--sgl-rapida) ease,
    box-shadow var(--sgl-rapida) ease;
}

a.card {
  transition: border-color var(--sgl-media) ease, box-shadow var(--sgl-media) ease,
    translate var(--sgl-media) var(--sgl-curva-mover);
}

a.card:hover {
  translate: 0 -2px;
}

.link-seta .bi {
  transition: translate var(--sgl-rapida) var(--sgl-curva-mover);
}

.link-seta:hover .bi {
  translate: 3px 0;
}

/* Setores do menu abrem e fecham suavemente: ajuda a saber onde cada coisa está
   (Bederson e Boltman, 1999). */
.collapsing {
  transition: height var(--sgl-media) var(--sgl-curva-mover);
}

.dropdown-menu.show {
  animation: sgl-surgir-menu var(--sgl-rapida) var(--sgl-curva-entrar) backwards;
}

/* Janelas: entram desacelerando (sobem 8 px e crescem de 98%) e saem acelerando. */
.modal.fade .modal-dialog {
  transform: none;
  transition: translate var(--sgl-media) var(--sgl-curva-sair), scale var(--sgl-media) var(--sgl-curva-sair);
  translate: 0 8px;
  scale: 0.98;
}

.modal.show .modal-dialog {
  transition-timing-function: var(--sgl-curva-entrar);
  translate: 0 0;
  scale: 1;
}

/* Faixa de conquista: esmaece e a estrela surge, só na primeira vez em cada sessão (interface.js). */
.conquista.animar {
  animation: sgl-esmaecer var(--sgl-lenta) var(--sgl-curva-entrar) backwards;
}

.conquista.animar .conquista-icone {
  animation: sgl-estrela var(--sgl-lenta) var(--sgl-curva-entrar) 120ms backwards;
}

/* Envio em andamento (interface.js): botão bloqueado contra clique duplo e, se demorar, indicador. */
.btn[aria-busy="true"]:disabled {
  opacity: 1;
}

.btn.carregando::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: sgl-girar 0.7s linear infinite;
}

/* Troca de tema: as cores se misturam em 0,2 s (preferencias.js liga e desliga esta classe). */
.trocando-tema,
.trocando-tema *,
.trocando-tema *::before,
.trocando-tema *::after {
  transition: background-color var(--sgl-media) ease, border-color var(--sgl-media) ease,
    color var(--sgl-media) ease, box-shadow var(--sgl-media) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .conteudo-interno,
  .publico main > *,
  .dropdown-menu.show {
    animation-name: sgl-esmaecer;
  }

  .conquista.animar .conquista-icone {
    animation: none;
  }

  a.card:hover,
  .link-seta:hover .bi {
    translate: none;
  }

  .btn:active:not(:disabled) {
    scale: none;
  }

  .modal.fade .modal-dialog {
    translate: none;
    scale: none;
  }

  .btn.carregando::before {
    border-right-color: currentColor;
    opacity: 0.5;
    animation: none;
  }

  .sidebar-setor .seta {
    transition: none;
  }
}

/* Impressão em A4 (ex.: OS, laudo, proposta, ata da análise crítica). Mesmas regras dos PDFs
   (core/pdf.py): texto a 10 pt e nada abaixo de 8 pt; texto em preto puro; nada que dependa da cor,
   porque muita cópia sai em preto e branco e o navegador não imprime fundos. Sempre no tema claro
   (o preferencias.js troca o tema antes de imprimir). */
/* Só as margens: o papel vem da impressora (A4) e a pessoa pode escolher paisagem para listas largas. */
@page {
  margin: 16mm 15mm 18mm;
}

@media print {
  /* Toda a escala é em rem: com a raiz a 10 pt, título sai a ~19 pt, tabela a ~9,4 pt e selo a ~8,1 pt. */
  :root {
    font-size: 10pt;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .barra-superior,
  .sidebar,
  .btn,
  form,
  .alert-dismissible,
  .conquista,
  .pagination {
    display: none !important;
  }

  .conteudo {
    padding: 0 !important;
  }

  .conteudo-interno {
    max-width: none;
    animation: none;
  }

  .text-body-secondary,
  .t-sec,
  .form-text {
    color: #4d4d4d !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .card,
  .table-responsive {
    border: 0.5pt solid #b8b4aa !important;
    box-shadow: none !important;
  }

  .table-responsive {
    overflow: visible !important;
  }

  .table > thead {
    display: table-header-group;
  }

  .table > thead th {
    border-bottom: 1pt solid #0f6e69 !important;
    background: none !important;
    color: #000 !important;
  }

  /* No papel a folha é estreita: célula mais compacta e código pode quebrar linha. */
  .table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
  }

  .codigo {
    white-space: normal;
  }

  tr,
  .list-group-item,
  .foto-avaria {
    break-inside: avoid;
  }

  /* Relatório de avarias: fotos em duas colunas, sem passar de um terço da folha de altura. */
  .foto-avaria img {
    max-height: 9cm;
    width: auto;
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  .card-header,
  .secao-titulo {
    break-after: avoid;
  }

  /* Selos: o fundo não sai na impressão; ficam contorno, ícone e texto em preto. */
  .badge,
  [class*="text-bg-"] {
    border: 0.5pt solid currentColor !important;
    background: none !important;
    color: #000 !important;
  }
}

/* ---------- Documentos escritos no SGL (procedimentos, instruções, manual) ----------
   Texto longo: linha de até ~72 caracteres, entrelinha folgada e títulos que marcam as seções. */
.folha-documento {
  max-width: 72ch;
  line-height: 1.6;
}

.folha-documento h2 {
  margin: 1.75rem 0 0.6rem;
  padding-top: 0.25rem;
  color: var(--sgl-petroleo-escuro);
  font-size: 1.2rem;
  font-weight: 800;
  scroll-margin-top: 5rem;
}

.folha-documento h2:first-child {
  margin-top: 0;
}

.folha-documento h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.folha-documento :is(ul, ol) {
  padding-left: 1.4rem;
}

.folha-documento li + li {
  margin-top: 0.25rem;
}

.folha-documento table {
  font-size: 0.9375rem;
  line-height: 1.45;
}

.nota-documento {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--sgl-petroleo);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--sgl-suave);
}

.sumario-documento ol {
  padding: 0.75rem 1.25rem 0.9rem;
}

.sumario-documento li + li {
  margin-top: 0.35rem;
}

.folha-documento :is(ins, del) {
  padding: 0 0.15em;
  border-radius: 0.2em;
  text-decoration-thickness: 2px;
}

/* Comparação entre revisões: o novo sublinhado sobre fundo petróleo claro, o retirado riscado sobre fundo
   vermelho claro. A forma (sublinhado, riscado) diz a diferença mesmo sem a cor. */
.folha-documento ins,
.comparacao .card-header ins {
  background: var(--sgl-petroleo-suave);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sgl-petroleo);
  text-underline-offset: 0.18em;
}

.folha-documento del,
.comparacao .card-header del {
  background: var(--sgl-erro-bg);
  color: inherit;
  text-decoration: line-through;
  text-decoration-color: var(--sgl-erro);
}

.lista-trechos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trecho {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sgl-borda);
}

.trecho:first-child {
  border-top: 0;
}

.trecho-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
}

.trecho-secao {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 700;
}

.trecho-texto > :last-child {
  margin-bottom: 0;
}

.comparacao-titulo {
  color: var(--sgl-petroleo-escuro);
  font-size: 1.1rem;
  font-weight: 800;
}

.trecho-texto tr:is(.linha-incluido, .linha-retirado) td {
  background: var(--sgl-suave);
}

.texto-completo > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* ---------- Editor do texto dos documentos (documentos/editar_texto.html) ----------
   Uma folha sobre a mesa, com a barra de formatação no alto, para escrever como num editor de texto.
   O Toast UI Editor recebe as cores, a fonte e os títulos do SGL, nos temas claro e escuro. */
.editor-documento {
  --altura-barra-superior: 4.25rem;  /* .barra-superior, que também fica presa no alto */
  --altura-barra-editor: 4.9rem;
}

.editor-barra {
  position: sticky;
  z-index: 20;
  top: var(--altura-barra-superior);
  min-height: calc(var(--altura-barra-editor) - 0.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-superficie);
  box-shadow: 0 6px 18px -14px rgb(0 0 0 / 0.35);
}

.editor-barra-titulo {
  min-width: 0;
}

.editor-barra-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.editor-mesa {
  display: grid;
  grid-template-columns: minmax(0, 860px) minmax(220px, 300px);
  gap: 1.25rem;
  align-items: start;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--sgl-suave);
}

.editor-folha {
  min-width: 0;
  padding: 2rem 2.5rem 2.5rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.375rem;
  background: var(--sgl-superficie);
  box-shadow: 0 10px 28px -18px rgb(0 0 0 / 0.4);
}

.editor-folha-cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sgl-petroleo);
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.editor-folha-titulo {
  margin: 1rem 0 0.5rem;
  color: var(--sgl-petroleo-escuro);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
}

.editor-dicas {
  position: sticky;
  top: calc(var(--altura-barra-superior) + var(--altura-barra-editor) + 0.5rem);
  padding: 1rem 1.1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-superficie);
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  line-height: 1.5;
}

.editor-dicas ul {
  padding-left: 1.1rem;
}

.editor-dicas li + li {
  margin-top: 0.4rem;
}

@media (max-width: 991.98px) {
  .editor-documento {
    --altura-barra-editor: 0rem;
  }

  .editor-barra {
    position: static;
  }

  .editor-mesa {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }

  .editor-folha {
    padding: 1.25rem 1rem 1.5rem;
  }

  .editor-dicas {
    position: static;
  }
}

/* Toast UI Editor com a identidade do SGL. */
.editor-folha .toastui-editor-defaultUI {
  border: 0;
  font-family: var(--sgl-fonte);
}

.editor-folha .toastui-editor-defaultUI-toolbar {
  position: sticky;
  z-index: 10;
  top: calc(var(--altura-barra-superior) + var(--altura-barra-editor));
  margin: 0 -0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.5rem;
  background: var(--sgl-suave);
}

.editor-folha .toastui-editor-toolbar-icons {
  border-color: transparent;
  background-color: transparent;
}

.editor-folha .toastui-editor-toolbar-icons:not(:disabled):hover {
  border-color: var(--sgl-borda);
  background-color: var(--sgl-superficie);
}

.editor-folha .toastui-editor-toolbar-divider {
  background-color: var(--sgl-borda);
}

.editor-folha .toastui-editor-main,
.editor-folha .toastui-editor-ww-container,
.editor-folha .toastui-editor-contents,
.editor-folha .ProseMirror {
  background: transparent;
}

.editor-folha .toastui-editor-ww-container .toastui-editor-contents {
  padding: 1rem 0 0;
}

.editor-folha .toastui-editor-contents > :first-child {
  margin-top: 0;
}

.editor-folha .toastui-editor-contents {
  color: var(--bs-body-color);
  font-family: var(--sgl-fonte);
  font-size: 1rem;
  line-height: 1.6;
}

.editor-folha .toastui-editor-contents p {
  margin: 0 0 0.75rem;
  color: var(--bs-body-color);
}

.editor-folha .toastui-editor-contents h2 {
  margin: 1.75rem 0 0.6rem;
  padding: 0;
  border: 0;
  color: var(--sgl-petroleo-escuro);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
}

.editor-folha .toastui-editor-contents h3 {
  margin: 1.25rem 0 0.4rem;
  color: var(--bs-body-color);
  font-size: 1.05rem;
  font-weight: 800;
}

.editor-folha .toastui-editor-contents :is(h1, h4, h5, h6) {
  border: 0;
  color: var(--bs-body-color);
}

.editor-folha .toastui-editor-contents :is(ul, ol) {
  margin: 0 0 0.75rem;
  padding-left: 1.4rem;
}

.editor-folha .toastui-editor-contents ul > li::before {
  background-color: var(--sgl-petroleo);
}

.editor-folha .toastui-editor-contents ol > li::before {
  color: var(--sgl-petroleo-escuro);
}

.editor-folha .toastui-editor-contents blockquote {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--sgl-petroleo);
  border-radius: 0 0.5rem 0.5rem 0;
  background: var(--sgl-suave);
  color: var(--bs-body-color);
}

.editor-folha .toastui-editor-contents blockquote p {
  color: var(--bs-body-color);
}

.editor-folha .toastui-editor-contents table {
  margin: 0.25rem 0 1rem;
  border-color: var(--sgl-borda);
  font-size: 0.9375rem;
}

.editor-folha .toastui-editor-contents table :is(th, td) {
  padding: 0.4rem 0.6rem;
  border-color: var(--sgl-borda);
}

.editor-folha .toastui-editor-contents table th {
  border-bottom: 2px solid var(--sgl-petroleo);
  background: var(--sgl-petroleo-suave);
  color: var(--bs-body-color);
  font-weight: 700;
}

.editor-folha .toastui-editor-contents table td {
  background: var(--sgl-superficie);
  color: var(--bs-body-color);
}

.editor-folha .toastui-editor-contents strong {
  color: inherit;
}

/* Botão de títulos: só Seção (título 2), Subseção (título 3) e Texto normal. */
.toastui-editor-popup-add-heading li:is([data-level="1"], [data-level="4"], [data-level="5"], [data-level="6"]) {
  display: none;
}

.toastui-editor-popup-add-heading li[data-level="2"] > *,
.toastui-editor-popup-add-heading li[data-level="3"] > * {
  font-size: 0;
}

.toastui-editor-popup-add-heading li[data-level="2"] > *::after {
  content: "Seção";
  font-size: 1.05rem;
}

.toastui-editor-popup-add-heading li[data-level="3"] > *::after {
  content: "Subseção";
  font-size: 0.95rem;
}

/* Tema escuro: superfícies e ícones do editor com as cores do SGL. */
[data-bs-theme="dark"] .toastui-editor-toolbar-icons {
  filter: invert(0.88) hue-rotate(180deg);
}

[data-bs-theme="dark"] :is(.toastui-editor-popup, .toastui-editor-context-menu) {
  border-color: var(--sgl-borda);
  background: var(--sgl-superficie);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] :is(.toastui-editor-popup, .toastui-editor-context-menu) :is(li, span, label, h1, h2, h3, div) {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .toastui-editor-popup li:hover,
[data-bs-theme="dark"] .toastui-editor-context-menu li:not(.disabled):hover {
  background: var(--sgl-suave);
}

[data-bs-theme="dark"] .toastui-editor-contents .ProseMirror-selectednode,
[data-bs-theme="dark"] .toastui-editor-contents td.te-cell-selected {
  background: var(--sgl-petroleo-suave);
}

/* ---------- Painel de indicadores ----------
   Paleta de referência dos gráficos (a mesma do controle ambiental e da intralaboratorial): série no slot 1,
   ano anterior em cinza (ênfase), faixa dos limites naturais no tom da série a 10 %, meta tracejada (limiar).
   Melhora e piora em verde e vermelho, sempre com seta e palavra; status (meta e sinal) com ícone e texto. */

.painel-indicadores {
  --serie: #2a78d6;
  --anterior: #b9b7ae;
  --faixa: rgba(42, 120, 214, 0.10);
  --grade: #e1e0d9;
  --eixo: #898781;
  --meta: #52514e;
  --bom: #0ca30c;
  --critico: #d03b3b;
  --superficie: var(--sgl-superficie);
}

[data-bs-theme=dark] .painel-indicadores {
  --serie: #3987e5;
  --anterior: #55544f;
  --faixa: rgba(57, 135, 229, 0.14);
  --grade: #2c2c2a;
  --meta: #c3c2b7;
}

.filtros-indicadores {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

.filtros-indicadores .filtro { min-width: 10rem; }
.filtros-indicadores .filtro-periodo { min-width: 15rem; }
.filtros-indicadores .form-label { margin-bottom: 0.2rem; font-size: 0.8125rem; color: var(--sgl-texto-2); }

.periodo-situacao {
  margin-bottom: 1.25rem;
  color: var(--sgl-texto-2);
  font-size: 0.875rem;
}

.periodo-situacao strong { color: var(--sgl-texto); }

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.75rem;
}

.cartao-indicador {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: var(--bs-border-radius-lg);
  background: var(--sgl-superficie);
  color: var(--sgl-texto);
  text-decoration: none;
  transition: box-shadow var(--sgl-rapida) var(--sgl-curva-mover), border-color var(--sgl-rapida) var(--sgl-curva-mover);
}

.cartao-indicador:hover,
.cartao-indicador:focus-visible {
  border-color: var(--sgl-petroleo-borda);
  box-shadow: var(--sgl-sombra);
  color: var(--sgl-texto);
}

.cartao-indicador.pede-atencao { border-left: 3px solid var(--sgl-erro); }

.ci-nome { font-size: 0.875rem; font-weight: 600; color: var(--sgl-texto-2); }

.ci-valor {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--sgl-texto);
}

.ci-valor-grande { font-size: 2.5rem; }
.ci-unidade { font-size: 0.875rem; font-weight: 400; color: var(--sgl-texto-2); }
.ci-detalhe { font-size: 0.8125rem; color: var(--sgl-texto-2); }

.ci-variacao { font-size: 0.8125rem; color: var(--sgl-texto-2); }
.ci-variacao.melhora { color: var(--sgl-ok); }
.ci-variacao.piora { color: var(--sgl-erro); }
.ci-variacao .ci-leitura { font-weight: 600; }
.ci-variacao .ci-vs { color: var(--sgl-texto-2); }

.ci-tendencia {
  display: block;
  width: 100%;
  height: 2rem;
  margin-top: 0.25rem;
  overflow: visible;
}

.ci-tendencia polyline { fill: none; stroke: var(--serie); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ci-tendencia circle { fill: var(--serie); stroke: var(--superficie); stroke-width: 1.5; }
.ci-tendencia circle.parcial { fill: var(--superficie); stroke: var(--serie); }

.ci-marcas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }

.marca-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--sgl-neutro-bg);
  color: var(--sgl-neutro);
}

.marca-status.atingida { background: var(--sgl-ok-bg); color: var(--sgl-ok); }
.marca-status.aceitavel { background: var(--sgl-atencao-bg); color: var(--sgl-atencao); }
.marca-status.nao_atingida { background: var(--sgl-erro-bg); color: var(--sgl-erro); }
.marca-status.informativo { background: var(--sgl-info-bg); color: var(--sgl-info); }

.lista-alertas { list-style: none; margin: 0; padding: 0.25rem 1.25rem 0.75rem; }
.lista-alertas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; padding: 0.4rem 0; border-bottom: 1px solid var(--sgl-borda); }
.lista-alertas li:last-child { border-bottom: 0; }
.lista-alertas li.desfavoravel > .bi { color: var(--sgl-erro); }
.lista-alertas li.favoravel > .bi { color: var(--sgl-ok); }
.lista-alertas li.informativo > .bi { color: var(--sgl-info); }
.lista-alertas .badge { margin-left: auto; font-weight: 500; }

.grade-setores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
}

.cartao-setor {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sgl-borda);
  border-radius: var(--bs-border-radius-lg);
  background: var(--sgl-superficie);
  color: var(--sgl-texto);
  text-decoration: none;
}

.cartao-setor:hover { border-color: var(--sgl-petroleo-borda); box-shadow: var(--sgl-sombra); color: var(--sgl-texto); }
.cartao-setor .bi { grid-row: span 2; font-size: 1.35rem; color: var(--sgl-petroleo); }
.cartao-setor .cs-nome { font-weight: 600; }
.cartao-setor .cs-info { font-size: 0.8125rem; color: var(--sgl-texto-2); }

.nav-setores { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nav-setores a { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; color: var(--sgl-texto-2); text-decoration: none; }
.nav-setores a:hover { background: var(--sgl-hover-linha); color: var(--sgl-texto); }
.nav-setores a.ativo { background: var(--sgl-petroleo-suave); color: var(--sgl-petroleo-escuro); font-weight: 600; }

.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 1rem;
}

.resumo-indicador { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.35rem; }

.comparacoes { display: grid; gap: 0.35rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.comparacoes div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.comparacoes dt { font-weight: 400; color: var(--sgl-texto-2); }
.comparacoes dd { margin: 0; font-weight: 600; }

.definicao dt { color: var(--sgl-texto-2); font-weight: 600; }
.definicao dd { margin-bottom: 0.6rem; }

/* Série do indicador (SVG) */
.grafico-indicador svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-indicador .grade { stroke: var(--grade); stroke-width: 1; }
.grafico-indicador .base { stroke: var(--eixo); stroke-width: 1; }
.grafico-indicador .eixo { fill: var(--bs-secondary-color); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-indicador .faixa-limites { fill: var(--faixa); }
.grafico-indicador .centro-limites { stroke: var(--eixo); stroke-width: 1; }
.grafico-indicador .linha-meta { stroke: var(--meta); stroke-width: 1; stroke-dasharray: 5 4; }
.grafico-indicador .rotulo-meta { fill: var(--meta); font-size: 11px; }
.grafico-indicador .barra { fill: var(--serie); transition: opacity var(--sgl-rapida) var(--sgl-curva-mover); }
.grafico-indicador .barra.parcial { opacity: 0.45; }
.grafico-indicador .barra.ativa { opacity: 0.8; }
.grafico-indicador .barra.anterior { fill: var(--anterior); }
.grafico-indicador .serie { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-indicador .serie.anterior { stroke: var(--anterior); }
.grafico-indicador .ponto { fill: var(--serie); stroke: var(--superficie); stroke-width: 2; }
.grafico-indicador .ponto.parcial { fill: var(--superficie); stroke: var(--serie); }
.grafico-indicador .marca-sinal { fill: none; stroke: var(--eixo); stroke-width: 2; }
.grafico-indicador .marca-sinal.favoravel { stroke: var(--bom); }
.grafico-indicador .marca-sinal.desfavoravel { stroke: var(--critico); }
.grafico-indicador .mira { stroke: var(--eixo); stroke-width: 1; }
.grafico-indicador .alvo { fill: transparent; cursor: crosshair; }
.grafico-indicador .alvo:focus { outline: none; }
.grafico-indicador .alvo:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.grafico-indicador .dica-grafico { white-space: normal; min-width: 10rem; max-width: 16rem; }

.grafico-legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.35rem; font-size: 0.75rem; color: var(--sgl-texto-2); }
.grafico-legenda .chave { display: inline-block; vertical-align: middle; margin-right: 0.25rem; }
.grafico-legenda .chave-barra { width: 0.65rem; height: 0.65rem; border-radius: 2px; background: var(--serie); }
.grafico-legenda .chave-linha { width: 1rem; height: 2px; background: var(--serie); }
.grafico-legenda .chave.anterior { background: var(--anterior); }
.grafico-legenda .chave-faixa { width: 1rem; height: 0.65rem; background: var(--faixa); border-top: 1px solid var(--eixo); }
.grafico-legenda .chave-meta { width: 1rem; height: 0; border-top: 1px dashed var(--meta); }
.grafico-legenda .chave-media { width: 1rem; height: 0; border-top: 1px solid var(--eixo); }

.grafico-nota { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--sgl-texto-2); }

/* Detalhamento em barras horizontais: uma série, uma cor, valor ao lado da barra */
.grade-quebras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem 1.5rem; }
.quebra-titulo { font-size: 0.8125rem; font-weight: 600; color: var(--sgl-texto-2); margin-bottom: 0.4rem; }
.quebra-lista { list-style: none; margin: 0; padding: 0; }
.quebra-lista li { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr auto; align-items: center; gap: 0.5rem; padding: 0.15rem 0; font-size: 0.8125rem; }
.quebra-rotulo { overflow-wrap: anywhere; }
.quebra-trilho { display: block; height: 0.6rem; }
.quebra-barra { display: block; height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; background: var(--serie); }
.quebra-valor { text-align: right; white-space: nowrap; }

.como-ler summary { cursor: pointer; color: var(--sgl-texto-2); font-size: 0.875rem; }
.como-ler ul { margin-top: 0.5rem; padding-left: 1.25rem; }
.como-ler li { margin-bottom: 0.35rem; }

/* ---------- Documentos para o cliente e para imprimir (proposta, orçamento e contrato de locação, OS, termos...) ----------
   Na tela, uma folha A4 sobre o fundo, igual ao que sai no papel ou no PDF; impressa, só o conteúdo. A folha fica
   sempre no tema claro (data-bs-theme="light" no article): é papel. O cabeçalho (partials/timbre.html) leva o logotipo
   e os dados da empresa; a cor petróleo marca títulos e filetes, e o texto fica em preto (README, "Documentos
   impressos"). */
.documento-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 210mm;
  margin: 0 auto 1rem;
}

.documento {
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 15mm 11mm;
  border-radius: 0.5rem;
  background: var(--sgl-papel);
  color: var(--sgl-texto);
  box-shadow: var(--sgl-sombra-alta);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.timbre {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--sgl-petroleo);
}

.timbre-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.timbre-marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* Logotipo largo ou alto: cabe na caixa sem distorcer. */
.timbre-logo {
  max-width: 18rem;
  max-height: 4.5rem;
  object-fit: contain;
}

.timbre-nome {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Nome, CNPJ, endereço e contatos de ponta a ponta, abaixo do logotipo. */
.timbre-empresa {
  margin-top: 0.6rem;
  color: var(--sgl-texto-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.timbre-empresa strong {
  color: var(--sgl-texto);
}

.timbre-detalhe {
  color: var(--sgl-texto-2);
  font-size: 0.8125rem;
}

.timbre-documento {
  flex-shrink: 0;
  text-align: right;
}

.timbre-titulo,
.documento h2 {
  color: var(--sgl-petroleo);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timbre-numero {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.documento h2 {
  margin: 1.5rem 0 0.5rem;
}

.documento p {
  margin-bottom: 0.5rem;
}

.documento-texto,
.documento-nota {
  font-size: 0.875rem;
}

.documento-nota {
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--sgl-petroleo-borda);
  background: var(--sgl-suave);
}

.documento-lista li + li {
  margin-top: 0.3rem;
}

/* Faixa com o que o cliente procura primeiro: validade, prazo, pagamento, valor. */
.documento-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem 1.25rem;
  margin: 0 0 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sgl-petroleo-borda);
  border-radius: 0.5rem;
  background: var(--sgl-petroleo-suave);
}

.documento-dados dt,
.documento-condicoes dt {
  color: var(--sgl-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.documento-dados dd,
.documento-condicoes dd {
  margin: 0;
  font-weight: 600;
}

.documento-partes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2rem;
}

.documento-partes p {
  font-size: 0.875rem;
}

.documento-parte-nome {
  margin-bottom: 0.15rem !important;
  font-size: 1rem !important;
  font-weight: 700;
}

.documento-condicoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 0 0 0.75rem;
}

/* Tabela de produtos e serviços: sem grade vertical; o alinhamento das colunas agrupa (Tullis, 1983). */
.documento-itens {
  width: 100%;
  margin-bottom: 0.5rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.documento-itens th {
  padding: 0.45rem 0.6rem;
  border-bottom: 1.5px solid var(--sgl-petroleo);
  color: var(--sgl-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}

.documento-itens td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--sgl-borda);
  vertical-align: middle;
}

.documento-itens .text-end {
  text-align: right;
}

.documento-itens-compacta td {
  padding: 0.35rem 0.6rem;
}

.documento-seq {
  width: 3rem;
  color: var(--sgl-texto-2);
}

.documento-produto {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Folha de campo (laboratorio/campo/folha.html): células altas para anotar à mão, um item por bloco. */
.folha-campo .documento-itens td {
  height: 9mm;
  border: 1px solid var(--sgl-borda);
}

.folha-campo-item {
  break-inside: avoid;
}

/* A imagem do produto numa moldura branca do mesmo tamanho em todas as linhas. */
.documento-produto-imagem {
  flex: 0 0 4.75rem;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0.25rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.5rem;
  background: var(--sgl-papel);
  object-fit: contain;
}

.documento-produto-nome {
  font-weight: 700;
}

.documento-produto-detalhe {
  color: var(--sgl-texto-2);
  font-size: 0.8125rem;
}

.documento-total {
  display: flex;
  justify-content: flex-end;
}

.documento-total dl {
  min-width: 17rem;
  margin: 0;
}

.documento-total dl > div {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.875rem;
}

.documento-total dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.documento-total .documento-total-final {
  margin: 0.25rem 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.375rem;
  background: var(--sgl-petroleo-suave);
  font-size: 1.05rem;
  font-weight: 800;
}

.documento-total .documento-total-final dd {
  color: var(--sgl-petroleo-escuro);
}

.documento-assinaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem 3rem;
  margin-top: 3.5rem;
  font-size: 0.875rem;
  text-align: center;
}

.documento-assinaturas > div {
  padding-top: 0.4rem;
  border-top: 1px solid var(--sgl-texto);
}

.documento-assinaturas span {
  display: block;
  color: var(--sgl-texto-2);
  font-size: 0.75rem;
}

.documento-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sgl-borda);
  color: var(--sgl-texto-2);
  font-size: 0.75rem;
}

/* Prévia do cabeçalho na tela Empresa e logotipo. */
.documento-previa {
  max-width: none;
  padding: 1.5rem 1.75rem;
}

@media (max-width: 575.98px) {
  .documento {
    padding: 1.25rem 1rem;
  }

  .timbre-topo {
    flex-direction: column;
    align-items: flex-start;
  }

  .timbre-documento {
    text-align: left;
  }

  .documento-produto-imagem {
    flex-basis: 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media print {
  .documento {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    font-size: 1rem;
  }

  /* Fundos claros só saem se a pessoa marcar "gráficos de fundo"; o contorno garante a faixa sem eles. */
  .documento-dados,
  .documento-total .documento-total-final {
    print-color-adjust: exact;
  }

  .documento-itens tr,
  .documento-total,
  .documento-assinaturas,
  .documento-partes section {
    break-inside: avoid;
  }

  .timbre,
  .documento h2 {
    break-after: avoid;
  }
}

/* ---------- Imagem de um cadastro (partials/campo_imagem.html): a atual ou a prévia da escolhida ---------- */
.campo-imagem {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}

.campo-imagem-quadro {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 9rem;
  height: 9rem;
  padding: 0.5rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.75rem;
  background: var(--sgl-papel);
}

.campo-imagem-quadro img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.campo-imagem-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: #56666A;
  font-size: 0.875rem;
}

.campo-imagem-vazio .bi {
  font-size: 1.75rem;
}

.campo-imagem-campos {
  flex: 1 1 16rem;
  min-width: 0;
}

/* Miniatura do produto nas listas e fichas (modelo de detector, peça). */
.miniatura-produto {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  padding: 0.15rem;
  border: 1px solid var(--sgl-borda);
  border-radius: 0.5rem;
  background: var(--sgl-papel);
  object-fit: contain;
}

.miniatura-produto-grande {
  width: 6rem;
  height: 6rem;
  padding: 0.3rem;
  border-radius: 0.75rem;
}

/* Campo-armadilha dos formulários públicos: fora da tela para pessoas, preenchido só por robôs. */
.campo-armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Linha do aviso de privacidade no rodapé dos documentos entregues (templates/partials/rodape_privacidade.html). */
.documento-privacidade {
  flex-basis: 100%;
  font-size: 0.7rem;
}

/* Manual do sistema (manual/templates): texto confortável, passos espaçados e os prints como figuras. */
.manual { max-width: 56rem; line-height: 1.6; }
.manual-passos li, .manual ul li { margin-bottom: 0.35rem; }
.manual-figura { margin: 0.75rem 0 1.5rem; }
.manual-figura img { max-height: 40rem; }
.manual kbd { font-size: 0.85em; }