/* ── Boas-vindas do modo demonstração ────────────────── */
/* Momento de marca entre a entrada e o app: rótulo em Neohellenic espaçado,
   título em Didot, as três frentes do produto como inscrições (fio de tinta,
   numeral, nome, uma linha) e o friso de meandro na base do cartão, como na
   entrada. No celular vira folha de baixo e as frentes viram lista. */
.bv-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bv-overlay.visible { opacity: 1; }
.bv-card {
  position: relative;
  width: 100%;
  max-width: 648px;
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bv-overlay.visible .bv-card { transform: none; }
.bv-corpo { padding: 30px 36px 30px; }
.bv-rotulo {
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold);
}
.bv-titulo {
  margin-top: 14px;
  font-family: var(--marca);
  font-size: 2.45rem;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--text);
}
.bv-texto {
  margin-top: 12px;
  max-width: 34rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text2);
  text-wrap: pretty;
}
.bv-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 30px;
}
.bv-lista li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 12px;
  border-top: 2px solid var(--tinta);
}
.bv-n {
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Um acento só, como no quadro: o primeiro numeral na terracota */
.bv-lista li:first-child .bv-n { color: var(--gold); }
.bv-nome { font-size: 0.9rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.bv-desc { margin-top: 3px; font-size: 0.8rem; line-height: 1.5; color: var(--text3); text-wrap: pretty; }
.bv-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.bv-acoes button { min-height: 42px; padding-inline: 1.15rem; }
.bv-acoes .btn-ghost { margin-left: -0.75rem; border-color: transparent; color: var(--text3); }
.bv-acoes .btn-ghost:hover:not(:disabled) { color: var(--text); border-color: transparent; }
.bv-friso { flex-shrink: 0; }

/* Escolha de quem ser na demo: seis pessoas, uma por perfil, como inscrições
   (numeral, nome, papel em Neohellenic espaçado e uma linha do que pode fazer) */
.bv-pessoas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 22px;
}
.bv-pessoa {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 10px;
  padding: 12px 14px 13px 12px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  white-space: normal;
  font-weight: 400;
}
.bv-pessoa:hover:not(:disabled) { background: var(--card2); border-color: var(--border-strong); border-top-color: var(--gold); }
.bv-pessoa.atual { border-top-color: var(--gold); background: var(--gold-dim); }
.bv-pessoa-n {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text3);
  font-variant-numeric: tabular-nums lining-nums;
}
.bv-pessoa:hover .bv-pessoa-n,
.bv-pessoa.atual .bv-pessoa-n { color: var(--gold); }
.bv-pessoa-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bv-pessoa-nome { font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.bv-pessoa-papel {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold);
}
.bv-pessoa-desc { margin-top: 3px; font-size: 0.8rem; line-height: 1.45; color: var(--text3); }

@media (max-width: 600px) {
  .bv-overlay { align-items: flex-end; padding: 0; }
  .bv-card {
    max-width: none;
    max-height: 94vh;
    max-height: 94dvh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(28px);
  }
  .bv-corpo { padding: 22px 20px 20px; }
  .bv-titulo { margin-top: 12px; font-size: 1.95rem; }
  .bv-texto { font-size: 0.9rem; }
  .bv-lista { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 20px 0 22px; }
  .bv-lista li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 0 13px;
    border-top: 1px solid var(--line);
  }
  .bv-lista li:first-child { border-top: 2px solid var(--tinta); }
  .bv-n { grid-row: span 2; margin: 0; font-size: 1.65rem; }
  .bv-desc { margin-top: 2px; }
  .bv-acoes button { flex: 1 1 0; min-height: 46px; }
  .bv-acoes .btn-primary { flex-grow: 2; }
  .bv-acoes .btn-ghost { margin-left: 0; border-color: var(--border); color: var(--text2); }
  .bv-pessoas { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 18px 0 18px; }
  .bv-pessoa { padding: 10px 12px 11px 10px; }
}

/* ── Entrada (login) ─────────────────────────────────────── */
/* Versão "Friso": os dois lados no mesmo fundo com a grade sutil (body.ceu),
   um fio separando os lados e o friso de meandro embaixo do lado da marca.
   Sete medalhões contam o caminho de uma compra. Segue o tema salvo (não há
   troca de tema na entrada): no claro, a mesma composição em argila. */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.entrada-lado {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
}
/* Friso na terracota do tema (no claro, inteira: a meia-tinta virava argila) */
.friso { display: block; flex-shrink: 0; color: var(--gold); opacity: 0.55; }
.light .friso { color: var(--gold-fill); opacity: 0.85; }
.friso-h { width: 100%; height: 14px; }
.entrada-miolo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5.5vh, 56px) clamp(32px, 4.6vw, 64px) clamp(28px, 4vh, 44px);
}
.entrada-marca { color: var(--text); line-height: 1; }
.entrada-marca .marca { font-size: 1.375rem; }

.entrada-titulo {
  margin-top: auto;
  padding-top: clamp(40px, 8vh, 96px);
  font-family: var(--marca);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.3vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--text);
}
.entrada-titulo span { display: block; color: var(--text3); }
.entrada-texto {
  margin-top: 1.25rem;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text2);
}

.entrada-etapas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(6px, 0.9vw, 12px);
  max-width: 600px;
  margin-top: clamp(28px, 4.5vh, 40px);
  padding-bottom: 26px;
}
.entrada-etapas li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.entrada-medalhao {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: var(--text);
  font-variant-numeric: lining-nums;
  animation: etapaPassa 0.6s ease both;
  animation-delay: calc(0.5s + var(--i) * 0.42s);
}
.entrada-etapa-nome {
  position: absolute;
  top: 100%;
  margin-top: 9px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text3);
  animation: nomePassa 0.6s ease both;
  animation-delay: calc(0.5s + var(--i) * 0.42s);
}
/* O momento da entrada: um percurso só, do pedido ao pagamento. Cada etapa
   acende ao ser alcançada e fica marcada como percorrida; a última, o
   pagamento, fica acesa. Uns 3,5 s e para: nada se mexe enquanto a pessoa
   digita (antes era um laço de 15,4 s sem fim) */
.entrada-etapas li:last-child .entrada-medalhao { animation-name: etapaChega; }
.entrada-etapas li:last-child .entrada-etapa-nome { animation-name: nomeChega; }
@keyframes etapaPassa {
  0%   { background: color-mix(in srgb, var(--bg) 70%, transparent); border-color: var(--border-strong); color: var(--text); }
  35%  { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); }
  100% { background: color-mix(in srgb, var(--bg) 70%, transparent); border-color: var(--gold-border); color: var(--gold); }
}
@keyframes etapaChega {
  0%   { background: color-mix(in srgb, var(--bg) 70%, transparent); border-color: var(--border-strong); color: var(--text); }
  100% { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); }
}
@keyframes nomePassa {
  0%   { color: var(--text3); }
  35%  { color: var(--gold); }
  100% { color: var(--text2); }
}
@keyframes nomeChega {
  0%   { color: var(--text3); }
  100% { color: var(--gold); }
}
/* Movimento reduzido: a regra global (base.css) zera duração e atraso, e a
   régua já nasce no fim do percurso */

/* Lado do formulário */
.login-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px clamp(24px, 4vw, 56px) 40px;
  min-width: 0;
}
.login-card { width: 100%; max-width: 372px; }
.login-card .view { display: none; }
.login-card .view.active { display: block; animation: loginVista 0.18s ease both; }
@keyframes loginVista { from { opacity: 0; } to { opacity: 1; } }

.login-card-titulo {
  font-family: var(--marca);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--text);
}
.login-card-sub {
  margin: 0.5rem 0 1.75rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text3);
}
.login-card-sub b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.login-centro { text-align: center; }

.login-form .form-group { margin-bottom: 1rem; }
.login-card label { color: var(--text2); }
.login-card input { min-height: 44px; background: color-mix(in srgb, var(--card) 85%, transparent); border-color: var(--border-strong); }
.login-card input[aria-invalid="true"] { border-color: var(--red-border); }
.login-card input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--red-dim); }

.login-label-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.login-link {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  border-radius: 2px;
}
.login-link:hover { color: var(--gold); text-decoration-color: currentColor; }
.login-link:focus-visible { outline: 2px solid var(--gold-border); outline-offset: 2px; }

.login-senha { position: relative; }
.login-senha input { padding-right: 2.75rem; }
.login-olho {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--text3);
}
.login-olho:hover { color: var(--text); background: var(--card3); }
.login-olho[aria-pressed="true"] { color: var(--text2); }
.login-olho:active:not(:disabled) { transform: translateY(-50%); }
.login-olho:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Erro: uma nota da inscrição, com o fio carmim à esquerda (o carmim é
   erro; a terracota fica para a ação) */
.login-erro {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: -0.1rem 0 1rem;
  padding: 0.6rem 0.75rem 0.6rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  background: var(--red-dim);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: loginVista 0.18s ease both;
}
.login-erro[hidden] { display: none; }
.login-erro svg { margin-top: 0.12rem; flex-shrink: 0; color: var(--red); }
.login-card input:disabled { opacity: 0.7; cursor: progress; }

.login-botao {
  width: 100%;
  min-height: 46px;
  font-size: 0.92rem;
}
.login-form .login-botao { margin-top: 0.4rem; }
.login-botao.login-carregando:disabled { opacity: 0.8; cursor: progress; }
.login-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.65s linear infinite;
}

.login-sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
  font-size: 0.78rem;
  color: var(--text3);
}
.login-sep::before,
.login-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.login-demo-dica {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text3);
}

.login-voltar {
  margin: -0.35rem 0 1rem -0.45rem;
  padding: 0.3rem 0.55rem 0.3rem 0.45rem;
  min-height: 32px;
  font-size: 0.8rem;
  color: var(--text3);
}
.login-voltar:hover { color: var(--text); background: var(--card3); }

/* Visão "link enviado": o envelope num medalhão aceso, como a etapa da vez
   no caminho ao lado; alinhada à esquerda como as outras visões */
.sent-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-fill);
  border: 1px solid var(--gold-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.25rem;
  color: var(--on-gold);
}
.login-sent-acao { margin-top: 0.25rem; }

/* Bloco da marca AFN (medidas do guia da marca AFN) */
.login-afn {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.login-afn-nome { display: flex; align-items: baseline; }

/* Tablet: os lados ficam iguais e o título encolhe */
@media (max-width: 1099px) {
  .login-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entrada-titulo { font-size: clamp(2.2rem, 4.6vw, 3rem); }
  .entrada-etapa-nome { font-size: 0.66rem; }
}
/* Tablet estreito: os sete nomes não cabem lado a lado; cada um aparece
   quando a sua etapa acende, e no fim fica só o do pagamento */
@keyframes nomeSoPassa {
  0%   { color: var(--text3); opacity: 0; }
  35%  { color: var(--gold); opacity: 1; }
  100% { color: var(--text3); opacity: 0; }
}
@keyframes nomeSoChega {
  0%   { color: var(--text3); opacity: 0; }
  100% { color: var(--gold); opacity: 1; }
}
@media (min-width: 768px) and (max-width: 939px) {
  .entrada-etapa-nome { font-size: 0.7rem; animation-name: nomeSoPassa; }
  .entrada-etapas li:last-child .entrada-etapa-nome { animation-name: nomeSoChega; }
}

/* Celular: uma coluna. Marca, título curto, o formulário e, na base da
   página, o friso de meandro; os medalhões e a divisória saem */
@media (max-width: 767px) {
  .login-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: stretch; }
  .entrada-lado { display: contents; }
  .entrada-miolo { order: 1; }
  .login-shell { order: 2; }
  .entrada-lado .entrada-friso { order: 3; align-self: end; margin-top: 8px; }
  .entrada-etapas { display: none; }
  .entrada-miolo { padding: 22px 20px 4px; }
  .entrada-titulo { margin-top: 28px; padding-top: 0; font-size: 2.15rem; }
  .entrada-texto { margin-top: 0.75rem; font-size: 0.92rem; line-height: 1.55; }
  .login-shell { align-items: flex-start; padding: 26px 20px 28px; }
  .login-card-titulo { font-size: 1.65rem; }
  .login-card-sub { margin-bottom: 1.25rem; }
  .login-afn { margin-top: 26px; }
  .sent-icon { width: 52px; height: 52px; }
}

/* ── Layout principal ────────────────────────────────── */
/* Barra lateral fixa à esquerda; conteúdo e rodapé na segunda coluna. Os
   modais e barras flutuantes que moram dentro do layout são fixos e não
   ocupam célula da grade. */
.main-layout {
  --lateral-w: 236px;
  display: grid;
  grid-template-columns: var(--lateral-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100vh;
}
.main-layout > .lateral { grid-column: 1; grid-row: 1 / -1; }
.main-layout > :not(.lateral) { grid-column: 2; min-width: 0; }

.main-content {
  position: relative;
  padding: 30px 36px 2.5rem;
  max-width: 1640px;
  width: 100%;
}
/* Grade sutil no alto da tela, esmaecendo para baixo (como no quadro aprovado) */
.main-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}

@media (max-width: 1279px) {
  .main-layout { --lateral-w: 212px; }
  .main-content { padding: 26px 28px 2.25rem; }
}

/* ── Footer ──────────────────────────────────────────── */
.main-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 36px;
  border-top: 1px solid var(--line);
}

/* ── Marca AFN — classes compartilhadas ── */
.pf-afn {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--afn);
  -webkit-text-stroke: 0.3px var(--afn-stroke);
}
.pf-sys {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--afn-sys);
}
.pf-gap  { width: 4px; display: inline-block; }
.pf-pipe {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--afn-sys);
}
.pf-info {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--afn-sys);
}

/* ── Tela de pedidos ─────────────────────────────────── */
/* Inscrição: título em Neohellenic com a frase-resumo; uma barra de
   controles só (busca, filtros rápidos, painel de filtros, quadro/lista);
   o quadro com um numeral por etapa (components.css) e, no celular, a régua
   de etapas (themes.css). */
.pedidos-tela [hidden],
.pf-fundo[hidden],
.pedidos-modal [hidden] { display: none !important; }

.pedidos-head { margin-bottom: 26px; }
.pedidos-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.pedidos-head-titulo { min-width: 0; }
.pedidos-resumo {
  margin-top: 14px;
  max-width: 36rem;
  min-height: 1.5em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text2);
  font-variant-numeric: tabular-nums lining-nums;
  text-wrap: pretty;
}
.pedidos-btn-novo { flex-shrink: 0; min-height: 40px; padding: 0.6rem 1.15rem 0.6rem 1rem; margin-top: 2px; }
.pedidos-btn-novo-curto { display: none; }

/* Barra de controles: busca · filtros rápidos · Filtros · quadro/lista,
   sobre um fio; o filtro ativo ganha o traço terracota */
.pedidos-controles {
  display: flex;
  align-items: center;
  gap: 0 1.5rem;
  min-height: 52px;
  margin-top: 26px;
  border-bottom: 1px solid var(--line);
}
.pedidos-busca { flex: 0 1 240px; min-width: 168px; }
.pedidos-busca input { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 0.85rem; }
.pedidos-busca input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 0.4rem;
  cursor: pointer;
  background: var(--text3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pedidos-busca input::-webkit-search-cancel-button:hover { background: var(--text); }

/* Filtros rápidos: texto com o contador em numeral, como os itens da lateral */
.pedidos-rapidos {
  display: flex;
  align-self: stretch;
  gap: 1.4rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pedidos-rapidos::-webkit-scrollbar { display: none; }
.rapido {
  position: relative;
  flex-shrink: 0;
  min-height: 0;
  padding: 0 1px;
  gap: 0.45rem;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text2);
  font-size: 0.86rem;
  font-weight: 600;
}
.rapido::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}
@media (hover: hover) {
  .rapido:hover { color: var(--text); }
  .rapido:hover::after { background: var(--border-strong); }
}
.rapido:active:not(:disabled) { transform: none; }
.rapido.active { color: var(--text); }
.rapido.active::after { background: var(--gold-fill); }
.rapido:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -4px; }
.rapido-n {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text3);
  font-variant-numeric: tabular-nums lining-nums;
}
.rapido-n:empty { display: none; }
.rapido.active .rapido-n { color: var(--gold); }

/* Botão "Filtros" e o painel que ele abre */
.pedidos-filtros-wrap { position: relative; flex-shrink: 0; margin-left: auto; }
.pedidos-btn-filtros { height: 36px; min-height: 36px; padding: 0 0.85rem 0 0.75rem; gap: 0.45rem; font-size: 0.84rem; }
.pedidos-btn-filtros svg { color: var(--text3); }
.pedidos-btn-filtros.aberto { background: var(--card3); }
.pedidos-btn-filtros.tem-filtro { border-color: var(--gold-border); }
.pedidos-btn-filtros.tem-filtro svg { color: var(--gold); }
.pedidos-filtros-n {
  margin-left: 0.1rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Quadro / lista: dois ícones num só contorno; o ativo leva o traço terracota */
.view-toggle {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.view-toggle button {
  width: 36px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text3);
}
.view-toggle button + button { border-left: 1px solid var(--border-strong); }
.view-toggle button:hover:not(.active) { color: var(--text); background: var(--card3); }
.view-toggle button.active { color: var(--text); background: var(--card3); box-shadow: inset 0 -2px 0 var(--gold-fill); }
.view-toggle button:active:not(:disabled) { transform: none; }
.view-toggle button:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

/* Painel de filtros: no computador, preso ao botão; no celular, folha de baixo */
.painel-filtros {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 180px);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--tinta);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  outline: none;
  animation: pfEntra 0.14s ease;
}
@keyframes pfEntra { from { opacity: 0; } to { opacity: 1; } }
.pf-cabeca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--line);
}
.pf-titulo {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}
.pf-ativos { font-size: 0.8rem; font-weight: 600; color: var(--gold); }
.pf-limpar {
  min-height: 32px;
  margin-left: auto;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text2);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.pf-limpar:hover { color: var(--text); text-decoration-color: currentColor; }
.pf-fechar { width: 32px; height: 32px; min-height: 32px; margin-left: auto; border-color: transparent; }
.pf-limpar:not([hidden]) + .pf-fechar { margin-left: 0; }
.pf-corpo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pf-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.pf-campo { min-width: 0; }
.pf-campo label,
.pf-rotulo { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text2); }
.pf-campo select { min-height: 38px; font-size: 0.85rem; }
.pf-periodo,
.pf-largo { grid-column: 1 / -1; }
.pf-datas { display: flex; align-items: center; gap: 10px; }
.pf-datas .campo-data-texto { flex: 1 1 0; width: 0; min-width: 0; min-height: 38px; font-size: 0.85rem; }
.pf-e { flex-shrink: 0; font-size: 0.82rem; color: var(--text3); }
.pf-ordem { display: none; }

.pf-visoes { display: flex; flex-direction: column; gap: 10px; }
.pf-visoes .rotulo-secao { font-size: 0.74rem; }
.pf-visoes-lista { display: flex; flex-direction: column; list-style: none; }
.pf-visao { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--line); }
.pf-visao:last-child { border-bottom: 1px solid var(--line); }
.pf-visao-nome {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px 6px 10px;
  border: none;
  border-radius: 0;
  background: none;
  text-align: left;
  white-space: normal;
}
.pf-visao-nome:hover { background: var(--card2); }
.pf-visao-nome:active:not(:disabled) { transform: none; }
.pf-visao-titulo { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.pf-visao-desc {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-visao.ativa .pf-visao-nome { box-shadow: inset 2px 0 0 var(--gold-fill); }
.pf-visao.ativa .pf-visao-titulo { color: var(--gold); }
.pf-visao-acao { width: 32px; height: 32px; min-height: 32px; border-color: transparent; }
.pf-visao-del:hover:not(:disabled) { color: var(--red); }
.pf-visao-input { flex: 1; min-height: 38px; margin: 5px 0; }
.pf-visoes-vazio { padding: 2px 0; font-size: 0.8rem; line-height: 1.55; color: var(--text3); }
.pf-salvar {
  align-self: flex-start;
  min-height: 34px;
  padding: 0 0.75rem 0 0.65rem;
  gap: 0.45rem;
  border: 1px dashed var(--border-strong);
  font-size: 0.8rem;
  color: var(--text2);
}
.pf-salvar:hover:not(:disabled) { color: var(--text); background: var(--card2); border-style: solid; }
.pf-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.pf-resultado { font-size: 0.84rem; color: var(--text2); }
.pf-resultado .numeral { font-size: 1.05rem; color: var(--text); }
.pf-ver { display: none; }
.pf-fundo { display: none; }

/* Telas médias: os filtros rápidos descem para uma linha própria */
@media (max-width: 1180px) and (min-width: 768px) {
  .pedidos-controles { flex-wrap: wrap; gap: 10px 0.75rem; padding-top: 2px; }
  .pedidos-busca { flex: 1 1 240px; }
  .pedidos-filtros-wrap { margin-left: 0; }
  .pedidos-rapidos { order: 9; flex: 1 0 100%; min-height: 44px; }
}

/* Estado vazio: a mesma inscrição do quadro — fio de tinta, "00", título e saída */
.pedidos-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
  margin-top: 6px;
  padding: 18px 0 10px;
  border-top: 2px solid var(--tinta);
}
.pedidos-vazio-n {
  font-family: var(--display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--text3);
  opacity: 0.55;
  font-variant-numeric: tabular-nums lining-nums;
}
.pedidos-vazio-icone { display: flex; color: var(--red); }
.pedidos-vazio-titulo { margin-top: 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; color: var(--text); }
.pedidos-vazio-sub { margin-top: 6px; max-width: 32rem; font-size: 0.88rem; line-height: 1.6; color: var(--text2); text-wrap: pretty; }
.pedidos-vazio-acao { margin-top: 18px; }

/* Modais da tela: fio de tinta no topo e título em Neohellenic, como as telas */
.pedidos-modal { border-top: 2px solid var(--tinta); }
.pedidos-modal .modal-header h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pedidos-modal-estreito { max-width: 460px; }
.np-modal { max-width: 680px; }
.np-head { min-width: 0; }
.np-sub { margin-top: 0.45rem; font-size: 0.82rem; color: var(--text3); }
.np-sub[hidden] { display: none; }
.np-sub-num { font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; color: var(--text2); }
#np-categorias .chip { border-radius: var(--radius-tag); }
.np-grid { gap: 1.1rem 1rem; }
.np-req { color: var(--text3); font-weight: 600; }
.np-legenda { margin-right: auto; align-self: center; font-size: 0.75rem; color: var(--text3); }
.form-group.invalido input,
.form-group.invalido select,
.form-group.invalido textarea { border-color: var(--red-border); }
.form-group.invalido input:focus,
.form-group.invalido select:focus,
.form-group.invalido textarea:focus { box-shadow: 0 0 0 3px var(--red-dim); }
.form-group.invalido .chip { border-color: var(--red-border); }
.form-group.invalido .form-error { display: block; }

.np-urgente {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.np-urgente:hover { border-color: var(--border-strong); }
.np-urgente:focus-visible { outline: 2px solid var(--gold-border); outline-offset: 2px; }
/* Urgência usa o acento: ligado, a caixa fica terracota e o selo do cartão aparece */
.np-urgente.on { background: var(--gold-dim); border-color: var(--gold-border); }
.np-urgente .toggle-label { display: flex; align-items: center; gap: 0.6rem; }
.np-urgente-selo { display: none; margin-left: 0; }
.np-urgente.on .np-urgente-selo { display: inline-flex; }
.np-urgente-desc { display: block; margin-top: 0.15rem; font-size: 0.76rem; line-height: 1.45; color: var(--text3); }

/* Modal "Cancelar selecionados" */
.bulk-cancel-msg { margin-bottom: 0.875rem; font-size: 0.875rem; line-height: 1.55; color: var(--text2); }
.bulk-cancel-lista {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--line);
}
.bulk-cancel-lista .lp-num { flex-shrink: 0; }
.bulk-motivo-outros { margin-top: 1rem; }
.bulk-cancel-lista:empty { display: none; }
.bulk-cancel-lista li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.6rem 0;
  font-size: 0.84rem;
}
.bulk-cancel-lista li + li { border-top: 1px solid var(--line); }
.bulk-cancel-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bulk-cancel-mais { color: var(--text3); font-size: 0.78rem !important; }

/* Modal "Salvar visão" */
.visao-resumo { margin-top: 1.1rem; }
.visao-resumo-rotulo {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
}
.visao-resumo-itens { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.visao-resumo-item {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-tag);
}

/* ── Paginação da lista ──────────────────────────────── */
.lista-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 14px;
}
.lista-paginacao .btn-ghost { border-color: transparent; }
.lista-paginacao .btn-ghost:hover:not(:disabled) { border-color: var(--border); }
.lista-paginacao .btn-ghost:disabled { opacity: 0.35; pointer-events: none; }
.pagina-info,
.pagina-atual { font-size: 0.84rem; color: var(--text3); font-variant-numeric: tabular-nums lining-nums; }
.pagina-info .numeral,
.pagina-atual .numeral { font-size: 1.05rem; color: var(--text); }
.pagina-btns { display: flex; align-items: center; gap: 0.5rem; }
.pagina-atual { min-width: 3.5rem; text-align: center; }

/* ── Dashboard / Relatórios ──────────────────────────── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.dash-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dash-export { display: flex; gap: 0.5rem; }

.dash-grid-1 {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
}

/* ── Relatórios (rel-*) ──────────────────────────────────
   Inscrição: título grande e uma barra só de filtros; indicadores como
   numerais sob o fio de tinta, sem caixas; seções abertas, separadas por
   fios e tipografia. O gráfico é HTML com tokens: acompanha o tema. */
:root, .rel-page {
  /* Tons das séries (categorias): matizes da cerâmica, sem azul ou vermelho
     saturados. A cor cadastrada escolhe o matiz (js/relatorios.js). */
  --rel-ocre: #D3A04E;
  --rel-areia: #C9B48C;
  --rel-oliva: #93AE7C;
  --rel-mar: #82ADA3;
  --rel-egeu: #8CA6C2;
  --rel-ametista: #A893BC;
  --rel-rosa: #C88E96;
  --rel-vinho: #B9746B;
  --rel-argila: #A09282;
  --rel-neutra: #8A7D6E;                 /* barras de empresa e fornecedor */
  --rel-outras: color-mix(in srgb, var(--text3) 60%, var(--bg));   /* "Outras" categorias */
  /* Gráfico mensal: os meses fechados são o dado, em terracota cheia (5,3:1
     sobre o fundo); o mês em andamento é parcial, então vai em contorno com
     hachura. A terracota a 34% do fundo lia como cinza (1,6:1) */
  --rel-mes: var(--gold-fill);
  --rel-mes-hover: var(--gold-fill-hover);
}
.light, .light .rel-page {
  --rel-ocre: #9A6A14;
  --rel-areia: #8C7346;
  --rel-oliva: #4F7A3A;
  --rel-mar: #3D756C;
  --rel-egeu: #41678C;
  --rel-ametista: #6C5888;
  --rel-rosa: #9A5462;
  --rel-vinho: #8E3F33;
  --rel-argila: #7D6E5C;
  --rel-neutra: #A08F7A;
  --rel-mes: var(--gold-fill);
  --rel-mes-hover: var(--gold-fill-hover);
}
.rel-print-head { display: none; }

/* Cabeçalho: título de tela e a frase do período */
.rel-head { margin-bottom: 26px; }
.rel-frase {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text2);
}
.rel-frase-sep { color: var(--text3); }

/* Barra única: período, datas (no Livre), empresa e Exportar */
.rel-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 38px;
}
.rel-seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rel-seg-btn {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 600;
}
.rel-seg-btn + .rel-seg-btn { border-left: 1px solid var(--border-strong); }
.rel-seg-btn:hover:not(.active) { background: var(--card3); color: var(--text); }
/* Ativo como no quadro/lista de Pedidos: fundo leve e o traço terracota */
.rel-seg-btn.active { background: var(--card3); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold-fill); }
.rel-seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.rel-datas { display: flex; align-items: center; gap: 8px; }
.rel-datas[hidden] { display: none; }
.rel-datas .campo-data-texto { width: 134px; min-height: 38px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.rel-datas-ate { font-size: 0.82rem; color: var(--text3); }
.rel-barra-fim { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rel-empresa { width: 212px; min-height: 38px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.rel-btn-exportar { min-height: 38px; }
.rel-btn-exportar.loading { opacity: 0.6; cursor: progress; }
.rel-btn-seta { display: inline-flex; margin-left: -2px; color: var(--text3); }

.rel-menu-wrap { position: relative; }
.rel-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 284px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.rel-menu[hidden] { display: none; }
.rel-menu-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text2);
  text-align: left;
  white-space: normal;
}
.rel-menu-item svg { margin-top: 1px; color: var(--text3); }
.rel-menu-item:hover,
.rel-menu-item:focus-visible { background: var(--card3); color: var(--text); outline: none; }
.rel-menu-item:hover svg,
.rel-menu-item:focus-visible svg { color: var(--gold); }
.rel-menu-txt { display: flex; flex-direction: column; gap: 1px; }
.rel-menu-txt strong { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.rel-menu-txt small { font-size: 0.75rem; color: var(--text3); }
.rel-menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* Indicadores: numeral sob o fio de tinta, rótulo e variação em texto pequeno */
.rel-kpis { display: grid; gap: 28px; margin-bottom: 56px; }
.rel-kpis-5 { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.rel-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel-kpi {
  min-width: 0;
  padding-top: 16px;
  border-top: 2px solid var(--tinta);
  container-type: inline-size;
}
.rel-kpi-valor {
  font-family: var(--display);
  font-size: clamp(1.75rem, 19cqi, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.rel-kpi.destaque .rel-kpi-valor { font-size: clamp(2rem, 17cqi, 3.5rem); color: var(--gold); }
.rel-moeda { margin-right: 0.16em; font-size: 0.5em; letter-spacing: 0.02em; }
.rel-cent { font-size: 0.5em; }
.rel-kpi-rotulo { margin-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.rel-kpi-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text3);
}
.rel-var {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.rel-alerta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); white-space: nowrap; }
.rel-alerta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cor, var(--gold)); }

/* Seções abertas: fio de tinta no topo, título em Neohellenic */
.rel-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 60px 44px; }
.rel-larg-12 { grid-column: span 12; }
.rel-larg-6 { grid-column: span 6; }
.rel-secao { display: flex; flex-direction: column; min-width: 0; padding-top: 14px; border-top: 2px solid var(--tinta); }
.rel-secao-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.rel-secao-tit { min-width: 0; }
.rel-secao-tit h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--text);
}
.rel-secao-meta { margin-top: 5px; font-size: 0.82rem; line-height: 1.45; color: var(--text3); }
.rel-secao-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.rel-mini-seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rel-mini-seg button {
  width: 38px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text3);
}
.rel-mini-seg button + button { border-left: 1px solid var(--border-strong); }
.rel-mini-seg button:hover:not(.active) { background: var(--card3); color: var(--text); }
.rel-mini-seg button.active { background: var(--card3); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold-fill); }

/* Gasto mensal: colunas na paleta (o mês corrente em terracota cheia, os
   anteriores apagados), média tracejada e a leitura ao lado */
.rel-mensal { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 52px; align-items: start; }
.rel-mensal.so-grafico { grid-template-columns: minmax(0, 1fr); }
.rel-mensal-graf { min-width: 0; }
.rel-colchart { display: flex; flex-direction: column; }
.rel-plot { position: relative; height: 230px; margin: 20px 0 0 62px; }
.rel-grade-linha { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.rel-grade-linha.base { border-top-color: var(--text3); }
.rel-grade-linha span {
  position: absolute;
  right: calc(100% + 12px);
  top: -0.5em;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
/* A média passa atrás das colunas; os rótulos têm o fundo da página por trás */
.rel-media { position: absolute; left: 0; right: 0; z-index: 1; height: 0; border-top: 1px dashed var(--text2); pointer-events: none; }
.rel-cols { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rel-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-height: 0;
  padding: 0 20%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}
.rel-col:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rel-col:active:not(:disabled) { transform: none; }
.rel-col-valor {
  margin-bottom: 5px;
  padding: 1px 4px;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text2);
  white-space: nowrap;
  background: var(--bg);
}
.rel-col-valor:empty { display: none; }
.rel-col.atual .rel-col-valor { color: var(--text); }
.rel-col.zero .rel-col-valor { font-family: var(--font); font-size: 0.72rem; font-weight: 500; color: var(--text3); }
.rel-col-barra {
  display: block;
  flex-shrink: 0;
  width: 100%;
  max-width: 64px;
  background: var(--rel-mes);
  transition: background var(--transition-fast);
}
/* Mês em andamento: contorno e hachura a 45° (dado incompleto) */
.rel-col.atual .rel-col-barra {
  box-sizing: border-box;
  border: 2px solid var(--rel-mes);
  border-bottom: 0;
  background: repeating-linear-gradient(45deg, var(--rel-mes) 0 2px, transparent 2px 7px);
}
.rel-col.atual.zero .rel-col-barra { height: 2px !important; border: 0; background: var(--rel-mes); }
.rel-col:hover .rel-col-barra,
.rel-col.ativa .rel-col-barra { background: var(--rel-mes-hover); }
.rel-col.atual:hover .rel-col-barra,
.rel-col.atual.ativa .rel-col-barra { border-color: var(--rel-mes-hover); background: repeating-linear-gradient(45deg, var(--rel-mes-hover) 0 2px, transparent 2px 7px); }
.rel-col.ativa .rel-col-valor { visibility: hidden; }
@media (hover: none) {
  .rel-col:hover:not(.ativa) .rel-col-barra { background: var(--rel-mes); }
  .rel-col.atual:hover:not(.ativa) .rel-col-barra { background: repeating-linear-gradient(45deg, var(--rel-mes) 0 2px, transparent 2px 7px); }
  .rel-linha:hover { background: transparent; }
}
.rel-eixo-x { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 10px 0 0 62px; }
.rel-eixo-x span {
  text-align: center;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
}
.rel-eixo-x span.atual { color: var(--text); }

.rel-leitura { display: flex; flex-direction: column; margin-top: 4px; }
.rel-leitura > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.rel-leitura > div:first-child { padding-top: 0; }
.rel-leitura > div:last-child { border-bottom: 0; }
.rel-leitura dt { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text3); }
.rel-leitura .media dt::before { content: ''; width: 16px; border-top: 1px dashed var(--text2); }
.rel-leitura .atual dt::before { content: ''; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--rel-mes); background: repeating-linear-gradient(45deg, var(--rel-mes) 0 1.5px, transparent 1.5px 4px); }
.rel-leitura dd { margin: 6px 0 0; }
.rel-leitura-num {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.rel-leitura-sub { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--text3); }

.rel-dica {
  position: fixed;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.rel-dica[hidden] { display: none; }
.rel-dica-tit { font-size: 0.72rem; color: var(--text3); }
.rel-dica strong { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.rel-dica-sub { font-size: 0.74rem; color: var(--text2); }

/* Versão em tabela do gasto mensal */
.rel-tabela-wrap { overflow-x: auto; }
.rel-tabela thead th {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  border-bottom: 2px solid var(--tinta);
}
.rel-tabela th.dir, .rel-tabela td.dir { text-align: right; }
.rel-tabela th:first-child, .rel-tabela td:first-child { padding-left: 0; }
.rel-tabela th:last-child, .rel-tabela td:last-child { padding-right: 0; }
.rel-tabela tbody tr { cursor: default; }
.rel-tabela tbody tr:hover, .light .rel-tabela tbody tr:hover { background: transparent; }
.rel-tabela tbody td { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.rel-tabela tbody td:first-child { font-weight: 500; }
.rel-tabela tbody td.dir { color: var(--text); }
.rel-tabela tfoot td { padding: 0.7rem 1rem; border-top: 1px solid var(--tinta); font-weight: 700; color: var(--text); }
.rel-parcial { margin-left: 0.35rem; font-size: 0.74rem; font-weight: 400; color: var(--text3); }
.rel-mes-curto { display: none; text-transform: capitalize; }

/* Para onde vai o dinheiro: categoria e empresa lado a lado, barras finas
   na mesma escala (a fatia de cada item no total do período) */
.rel-dinheiro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.rel-dinheiro-col { min-width: 0; }
.rel-subtit {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
}
.rel-barras { display: flex; flex-direction: column; list-style: none; }
.rel-barra-item { padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.rel-barra-item:last-child { border-bottom: 0; }
.rel-barra-topo {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 2.6rem;
  align-items: baseline;
  gap: 12px;
  font-size: 0.88rem;
}
.rel-barra-cor { align-self: center; width: 8px; height: 8px; background: var(--cor); }
.rel-barra-nome { min-width: 0; overflow: hidden; font-weight: 500; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.rel-barra-qtd { margin-left: 8px; font-size: 0.76rem; font-weight: 400; color: var(--text3); }
.rel-barra-valor { font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.rel-barra-pct { font-size: 0.78rem; color: var(--text3); text-align: right; white-space: nowrap; }
.rel-trilho { height: 3px; margin: 10px 0 0 20px; background: var(--card3); }
.rel-trilho span { display: block; height: 100%; background: var(--cor); }
.rel-vazio-linha { padding: 16px 0; font-size: 0.86rem; color: var(--text3); }

/* Listas (parcelas, maiores compras, fila): linhas finas, numerais à esquerda */
.rel-linhas { display: flex; flex-direction: column; list-style: none; }
.rel-linhas li + li { border-top: 1px solid var(--line); }
.rel-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: calc(100% + 16px);
  min-height: 0;
  margin: 0 -8px;
  padding: 12px 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font-weight: 400;
  text-align: left;
  white-space: normal;
}
.rel-linha:hover { background: var(--neutral-dim); }
.rel-linha:active:not(:disabled) { transform: none; }
.rel-linha:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rel-data { display: flex; flex-direction: column; align-items: center; width: 38px; line-height: 1; }
.rel-data strong { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.rel-data small {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
}
.rel-rank { width: 26px; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--text3); font-variant-numeric: tabular-nums lining-nums; }
.rel-linha-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-linha-tit { overflow: hidden; font-size: 0.88rem; font-weight: 600; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.rel-linha-sub { overflow: hidden; font-size: 0.76rem; color: var(--text3); white-space: nowrap; text-overflow: ellipsis; }
.rel-linha-sub > * + *::before { content: '·'; margin: 0 0.45em; }
.rel-cod { font-family: var(--display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.rel-linha-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rel-linha-valor { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.rel-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text2); white-space: nowrap; }
.rel-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cor, var(--text3)); }
.rel-estado.forte { font-weight: 600; color: var(--text); }
.rel-estado.atraso { font-weight: 600; color: var(--red); }
.rel-estado.sem-ponto { color: var(--text3); }
.rel-estado.sem-ponto::before { display: none; }
.rel-quando { font-size: 0.76rem; color: var(--text3); white-space: nowrap; }

/* Régua das etapas, como o cabeçalho do quadro; reprovados e cancelados à parte */
.rel-etapas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) 1px repeat(2, minmax(0, 0.85fr));
  gap: 0 22px;
  list-style: none;
}
.rel-etapa { min-width: 0; padding-top: 12px; border-top: 2px solid var(--tinta); }
.rel-etapa-num {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.rel-etapa-nome { display: block; margin-top: 8px; overflow: hidden; font-size: 0.86rem; font-weight: 600; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.rel-etapa-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text3); white-space: nowrap; }
.rel-etapa.zero .rel-etapa-num { color: var(--border-strong); }
.rel-etapa.fora { padding-top: 13px; border-top: 1px solid var(--border-strong); }
.rel-etapa.fora .rel-etapa-num { color: var(--text2); }
.rel-etapa.fora.zero .rel-etapa-num { color: var(--border-strong); }
.rel-etapas-sep { background: var(--line); }

/* Estados vazios e erro */
.rel-vazio {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 18px 0;
}
.rel-vazio-ic { display: flex; margin-bottom: 6px; color: var(--text3); }
.rel-vazio-tit { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.rel-vazio-txt { max-width: 460px; font-size: 0.86rem; line-height: 1.55; color: var(--text3); }
.rel-vazio .btn-sm { margin-top: 10px; }
.rel-erro { padding-top: 14px; border-top: 2px solid var(--tinta); }

@media screen and (max-width: 1180px) {
  .rel-kpis-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rel-kpis-5 .rel-kpi { grid-column: span 2; }
  .rel-kpis-5 .rel-kpi.destaque { grid-column: span 4; }
  .rel-mensal { grid-template-columns: minmax(0, 1fr) 200px; gap: 36px; }
  .rel-grade { column-gap: 32px; }
}
@media screen and (max-width: 1023px) {
  .rel-larg-6 { grid-column: span 12; }
  .rel-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-mensal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rel-leitura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .rel-leitura > div, .rel-leitura > div:first-child { padding: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .rel-etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
  /* O separador vira quebra de linha: reprovados e cancelados numa linha própria */
  .rel-etapas-sep { grid-column: 1 / -1; height: 0; margin-bottom: -8px; background: none; }
}
@media screen and (max-width: 767px) {
  .rel-head { margin-bottom: 16px; }
  .rel-frase { margin-top: 8px; font-size: 0.86rem; }
  .rel-frase-emp { display: none; }   /* a empresa aparece no seletor logo abaixo */
  .rel-barra { gap: 8px; margin-bottom: 30px; }
  .rel-seg { display: flex; width: 100%; }
  .rel-seg-btn { flex: 1; min-width: 0; padding: 0 2px; font-size: 0.8rem; }
  .rel-datas { width: 100%; }
  .rel-datas .campo-data-texto { flex: 1; width: auto; min-width: 0; }
  .rel-barra-fim { width: 100%; margin-left: 0; gap: 8px; }
  .rel-empresa { flex: 1; width: auto; min-width: 0; }
  .rel-btn-exportar { width: 40px; min-width: 40px; padding: 0; }
  .rel-btn-rot, .rel-btn-seta { display: none !important; }
  .rel-menu { min-width: 264px; }

  .rel-kpis { gap: 26px 18px; margin-bottom: 44px; }
  .rel-kpis-5, .rel-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-kpis-5 .rel-kpi { grid-column: auto; }
  .rel-kpis-5 .rel-kpi.destaque { grid-column: 1 / -1; }
  .rel-kpi { padding-top: 12px; }
  .rel-kpi-valor { font-size: clamp(1.5rem, 18cqi, 2.2rem); }
  .rel-kpi.destaque .rel-kpi-valor { font-size: clamp(2.2rem, 14cqi, 3rem); }
  .rel-kpi-rotulo { margin-top: 8px; font-size: 0.86rem; }

  .rel-grade { row-gap: 48px; }
  .rel-secao-cab { margin-bottom: 16px; }
  .rel-secao-tit h2 { font-size: 1.3rem; }
  .rel-plot { height: 190px; margin-left: 50px; }
  .rel-eixo-x { margin-left: 50px; }
  .rel-eixo-x span { font-size: 0.7rem; letter-spacing: 0.06em; }
  .rel-grade-linha span { right: calc(100% + 8px); font-size: 0.68rem; }
  .rel-col { padding: 0 14%; }
  .rel-col-valor { display: none; }
  .rel-leitura { display: flex; gap: 0; }
  .rel-leitura > div, .rel-leitura > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
  }
  .rel-leitura dd { margin: 0; text-align: right; }
  .rel-leitura-num { font-size: 1.3rem; }
  .rel-leitura-sub { margin-top: 1px; font-size: 0.74rem; }

  .rel-dinheiro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rel-barra-topo { grid-template-columns: 8px minmax(0, 1fr) auto 2.3rem; gap: 10px; font-size: 0.86rem; }
  .rel-barra-qtd { display: none; }
  .rel-linha { align-items: start; gap: 12px; width: 100%; margin: 0; padding: 12px 0; }
  .rel-linha-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; white-space: normal; }
  .rel-linha-valor { font-size: 1rem; }
  .rel-etapas { gap: 22px 14px; }
  .rel-etapa-num { font-size: 2rem; }
  .rel-etapa-nome { font-size: 0.78rem; white-space: normal; line-height: 1.25; }
  .rel-etapa-sub { font-size: 0.74rem; }
  .rel-mes-longo { display: none; }
  .rel-mes-curto { display: inline; }
  .rel-parcial { display: block; margin-left: 0; }
  .rel-tabela thead th, .rel-tabela tbody td, .rel-tabela tfoot td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .rel-vazio { min-height: 130px; }
}

/* Impressão dos relatórios: papel na paleta clara da Inscrição (argila,
   tinta e terracota), qualquer que seja o tema da tela */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html:has(.rel-page) {
    --bg: #fff; --card: #fff; --card2: #FBF6EE; --card3: #EFE6D7;
    --border: #DED0BA; --border-strong: #CDBBA0; --line: #E2D5C1; --tinta: #1A1510;
    --text: #1A1510; --text2: #57493A; --text3: #74644F;
    --gold: #A4462A; --gold-fill: #B5502E; --gold-fill-hover: #B5502E;
    --gold-dim: rgba(181, 80, 46, 0.10); --gold-border: rgba(164, 70, 42, 0.36);
    --green: #456B32; --green-dim: rgba(69, 107, 50, 0.10); --red: #B3261E; --red-dim: rgba(179, 38, 30, 0.08);
    --blue: #3A6690; --amber: #835A10; --neutral-dim: rgba(26, 21, 16, 0.045);
    --shadow-sm: none; --shadow-md: none;
    --afn: #6b1f2a; --afn-stroke: rgba(107, 31, 42, 0.4); --afn-sys: #505050;
    color-scheme: light;
  }
  html:has(.rel-page) .rel-page {
    --rel-ocre: #9A6A14; --rel-areia: #8C7346; --rel-oliva: #4F7A3A; --rel-mar: #3D756C; --rel-egeu: #41678C;
    --rel-ametista: #6C5888; --rel-rosa: #9A5462; --rel-vinho: #8E3F33; --rel-argila: #7D6E5C; --rel-neutra: #A08F7A;
    --rel-mes: var(--gold-fill);
  }
  html:has(.rel-page) body { background: #fff !important; padding-top: 0 !important; }
  html:has(.rel-page) .rel-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html:has(.rel-page) :is(.lateral, .bottom-nav, .demo-faixa, .offline-banner, #toast-container, .cmd-palette-overlay) { display: none !important; }
  html:has(.rel-page) .main-layout { display: block; min-height: 0; }
  html:has(.rel-page) .main-content::before { display: none; }
  /* O desenho da tela larga, reduzido e mais justo, cabe em duas folhas */
  .rel-page { max-width: none; padding: 0 !important; zoom: 0.76; }
  .rel-print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tinta);
  }
  .rel-print-marca { font-size: 1.2rem; color: var(--text); }
  .rel-print-doc { font-family: var(--font); font-size: 0.86rem; font-weight: 600; letter-spacing: 0;color: var(--text3); }
  .rel-barra, .rel-mini-seg, .rel-dica, .rel-vazio .btn-sm { display: none !important; }
  .rel-head { margin-bottom: 18px; }
  .rel-kpis { margin-bottom: 26px; }
  .rel-grade { gap: 26px 40px; }
  .rel-secao-cab { margin-bottom: 12px; }
  .rel-plot { height: 160px; margin-top: 14px; }
  .rel-leitura > div { padding: 10px 0; }
  .rel-barra-item { padding: 8px 0 9px; }
  .rel-linha { padding-top: 8px; padding-bottom: 8px; }
  .rel-kpi, .rel-secao, .rel-barra-item, .rel-linhas li, .rel-etapas { break-inside: avoid; }
  .rel-secao-cab { break-after: avoid; }
  html:has(.rel-page) .main-footer { break-before: avoid; }
  .rel-col-valor { display: block !important; }
  .rel-linha:hover { background: transparent; }
  .rel-col:hover .rel-col-barra { background: var(--rel-mes); }
  .rel-col.atual:hover .rel-col-barra { border-color: var(--rel-mes); background: repeating-linear-gradient(45deg, var(--rel-mes) 0 2px, transparent 2px 7px); }
  html:has(.rel-page) .main-footer { padding: 0.75rem 0 0 !important; border-top: 1px solid var(--line); }
  html:has(.rel-page) :is(.pf-sys, .pf-pipe, .pf-info) { color: #505050 !important; }
  html:has(.rel-page) .pf-afn { color: #6b1f2a !important; }
}

/* ── Detalhe do pedido ───────────────────────────────── */
/* Inscrição: o número em numerais sobre o título, a régua das sete etapas
   (a mesma linguagem do quadro e dos medalhões da entrada), o painel de
   decisão com a ação que faz o pedido andar e, abaixo, seções abertas sob
   um fio de tinta, sem caixas em volta. */
.detalhe-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1240px;
}
.detalhe-layout .mono { font-family: var(--mono); font-size: 0.9em; }
.dt-numeral {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

/* Links e labels com aparência de botão (anexar, abrir arquivo) */
.detalhe-layout :is(a, label):is(.btn-icon, .btn-ghost, .btn-secondary),
.modal-overlay :is(a, label):is(.btn-icon, .btn-ghost, .btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-btn);
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.detalhe-layout :is(a, label).btn-icon:focus-within,
.detalhe-layout :is(a, label):focus-visible { outline: 2px solid var(--gold-border); outline-offset: 1px; }

/* Cabeçalho: trilha com o número do pedido, título, uma linha de dados */
.detalhe-head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.detalhe-head-linha { display: flex; align-items: center; gap: 14px; min-height: 38px; }
.detalhe-trilha { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 0.84rem; color: var(--text3); }
.detalhe-trilha a { color: var(--text3); transition: color var(--transition-fast); }
.detalhe-trilha a:hover { color: var(--text); text-decoration: none; }
.detalhe-trilha-sep { color: var(--border-strong); }
.detalhe-num {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text2);
  white-space: nowrap;
}
.detalhe-urgente {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px 1px;
  border-radius: var(--radius-tag);
  background: var(--gold-fill);
  color: var(--on-gold);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.detalhe-head-linha .menu-acoes-wrap { margin-left: auto; }
.detalhe-titulo {
  max-width: 980px;
  font-size: clamp(1.625rem, 2.3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--text);
  overflow-wrap: anywhere;
}
.detalhe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text2);
}
.detalhe-meta-sep { color: var(--text3); }
.detalhe-meta > span > .detalhe-meta-sep { margin: 0 9px; }
.detalhe-meta-data {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.detalhe-prazo.perto { color: var(--text); font-weight: 700; }
.detalhe-prazo.atrasado { color: var(--red); font-weight: 700; }

/* Régua do caminho: as sete etapas em numerais, como as colunas do quadro.
   Feitas sob o fio de tinta e com a data; a atual acesa em terracota; as
   futuras apagadas. Reprovado ou cancelado: a etapa em que parou em carmim e
   o resto do fio tracejado. */
.caminho-wrap { position: relative; margin-top: -4px; }
.caminho {
  position: relative;               /* prende os textos de leitor de tela (absolutos) dentro da rolagem */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 10px;
}
.caminho-etapa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 12px;
  border-top: 2px solid var(--border-strong);
}
.caminho-num {
  margin-bottom: 5px;
  font-family: var(--display);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text3);
}
.caminho-nome { font-size: 0.82rem; font-weight: 600; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caminho-sub { font-size: 0.76rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums lining-nums; }
.caminho-etapa.feita { border-top-color: var(--tinta); }
.caminho-etapa.feita .caminho-num { color: var(--text); }
.caminho-etapa.feita .caminho-nome { color: var(--text2); }
.caminho-etapa.atual { border-top-color: var(--gold); }
.caminho-etapa.atual .caminho-num { color: var(--gold); }
.caminho-etapa.atual .caminho-nome { color: var(--text); font-weight: 700; }
.caminho-etapa.atual .caminho-sub { color: var(--gold); font-weight: 600; }
.caminho-etapa.futura .caminho-num { opacity: 0.45; }
.caminho-etapa.futura .caminho-nome { color: var(--text3); }
.caminho-etapa.parou { border-top-color: var(--red); }
.caminho-etapa.parou .caminho-num { color: var(--red); }
.caminho-etapa.parou .caminho-nome { color: var(--text); font-weight: 700; }
.caminho-etapa.parou .caminho-sub { color: var(--red); font-weight: 600; }
.caminho-etapa.cortada { border-top-style: dashed; border-top-color: var(--border-strong); }
.caminho-etapa.cortada .caminho-num { opacity: 0.25; }
.caminho-etapa.cortada .caminho-nome { text-decoration: line-through; text-decoration-color: var(--text3); }

/* Quando o pedido avança (a pessoa aprovou, comprou… ou alguém fez isso em
   tempo real), a régua mostra o passo: o fio da etapa alcançada se desenha da
   esquerda para a direita e o numeral acende; a etapa deixada vira tinta. O
   bloco do próximo passo troca de conteúdo num esmaecer curto. Com movimento
   reduzido, a regra global em base.css zera a duração e fica o estado final. */
.caminho-etapa { position: relative; }
.caminho-etapa.chegou { border-top-color: var(--border-strong); }
.caminho-etapa.chegou::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
  animation: fioDesenha 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.1s + var(--desde, 0ms)) both;
}
.caminho-etapa.chegou .caminho-num { animation: numAcende 0.6s ease calc(0.35s + var(--desde, 0ms)) both; }
.caminho-etapa.passou .caminho-num { animation: numTinta 0.5s ease var(--desde, 0ms) both; }
@keyframes fioDesenha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes numAcende {
  from { color: var(--text3); transform: translateY(5px); opacity: 0.6; }
  to   { color: var(--gold); transform: none; opacity: 1; }
}
@keyframes numTinta { from { color: var(--gold); } to { color: var(--text); } }
.detalhe-layout.avancou .decisao { animation: decisaoTroca 0.45s ease calc(0.15s + var(--desde, 0ms)) both; }
@keyframes decisaoTroca { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Painel de decisão: o que falta, quem responde e a ação. Fio no topo na cor
   do momento: tinta (aguardando outra pessoa), terracota (com você), oliva
   (concluído), carmim (reprovado ou cancelado). */
.decisao {
  --tom: var(--tinta);
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--tom);
  border-radius: var(--radius-card);
  padding: 20px 24px 0;
}
.light .decisao { box-shadow: var(--shadow-sm); }
.decisao.tom-voce { --tom: var(--gold); }
.decisao.tom-ok   { --tom: var(--green); }
.decisao.tom-erro { --tom: var(--red); }
.decisao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 20px; }
.decisao-texto { min-width: 0; max-width: 680px; }
.decisao-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text3);
}
.decisao:is(.tom-voce, .tom-ok, .tom-erro) .decisao-rotulo { color: var(--tom); }
.decisao-voce {
  padding: 1px 7px;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-tag);
  background: transparent;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold);
}
.decisao-titulo { font-size: 1.3rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.decisao-desc { margin-top: 5px; font-size: 0.92rem; line-height: 1.55; color: var(--text2); }
.decisao-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.decisao-acoes > button { min-height: 42px; padding: 0 18px; font-size: 0.9rem; }
.decisao-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0 -24px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
}
.decisao-fato { min-width: 0; padding: 14px 24px 16px; background: var(--card); }
.decisao-fato dt {
  margin-bottom: 6px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.decisao-fato dd { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.decisao-valor { font-size: 1rem; font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.decisao-valor .dt-numeral { font-size: 1.55rem; line-height: 1.05; }
.decisao-valor .dt-de { font-size: 0.9rem; font-weight: 500; color: var(--text3); }
.decisao-sub { font-size: 0.8rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decisao-fato.acima .dt-numeral { color: var(--amber); }
.decisao-fato.abaixo .dt-numeral { color: var(--green); }
.decisao-fato.prazo-perto .decisao-sub { color: var(--text); font-weight: 700; }
.decisao-fato.prazo-atrasado .decisao-sub { color: var(--red); font-weight: 600; }
.decisao-resp dd { flex-direction: row; align-items: center; gap: 10px; }
.decisao-resp .avatar { width: 32px; height: 32px; font-size: 0.78rem; }
.decisao-resp .avatar-pilha { margin-top: 0; }
.decisao-resp .avatar-pilha .avatar { box-shadow: 0 0 0 2px var(--card); }
.decisao-resp .avatar-vazio svg { width: 14px; height: 14px; }
.decisao-resp-txt { display: flex; flex-direction: column; min-width: 0; }
.decisao-resp-nome { font-size: 0.95rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decisao-resp-papel { font-size: 0.78rem; color: var(--text3); }

/* Menu "…" do cabeçalho: as ações secundárias (editar, duplicar, reabrir, PDF, liberar, cancelar) */
.menu-acoes-wrap { position: relative; }
.btn-mais { width: 38px; height: 38px; min-height: 38px; padding: 0; color: var(--text2); }
.btn-mais[aria-expanded="true"] { background: var(--card3); color: var(--text); }
.menu-acoes {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 228px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.menu-acoes[hidden] { display: none; }
.menu-acoes-item {
  justify-content: flex-start;
  gap: 0.6rem;
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text2);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
}
.menu-acoes-item svg { color: var(--text3); }
.menu-acoes-item:hover,
.menu-acoes-item:focus-visible { background: var(--card3); color: var(--text); }
.menu-acoes-item.perigo,
.menu-acoes-item.perigo svg { color: var(--red); }
.menu-acoes-item.perigo:hover,
.menu-acoes-item.perigo:focus-visible { background: var(--red-dim); }
.menu-acoes-sep { height: 1px; background: var(--line); margin: 0.3rem 0.25rem; }

/* Colunas: conteúdo principal + coluna lateral */
.detalhe-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
  margin-top: 6px;
}
.detalhe-main,
.detalhe-aside { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Seção aberta: fio de tinta no topo e rótulo em Neohellenic, como as colunas do quadro */
.dt-bloco { min-width: 0; }
.dt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding-top: 11px;
  margin-bottom: 16px;
  border-top: 2px solid var(--tinta);
}
.dt-secao {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}
.dt-contagem { font-size: 1rem; letter-spacing: 0.04em; color: var(--text3); font-variant-numeric: tabular-nums lining-nums; }
.dt-card-acoes { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dt-legenda { font-size: 0.78rem; color: var(--text3); white-space: nowrap; }
.dt-upload { font-size: 0.8rem; padding: 0 0.75rem; min-height: 32px; }

/* Dados: rótulos espaçados sobre os valores */
.detalhe-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  margin: 0;
}
.meta-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.meta-item dd { margin: 0; }
.meta-label { color: var(--text3); }
.meta-value { font-size: 0.95rem; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.meta-value .dt-numeral { font-size: 1.15rem; line-height: 1.2; }
.meta-item.destaque .meta-value .dt-numeral { color: var(--gold); font-size: 1.3rem; }
.detalhe-descricao {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.detalhe-descricao p { max-width: 74ch; font-size: 0.94rem; color: var(--text2); line-height: 1.7; white-space: pre-line; }

/* Título de seção legado (também usado no dashboard de relatórios) */
.detalhe-section-title {
  color: var(--text3);
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Estados vazios do detalhe: texto alinhado à esquerda, sem ícone em caixa */
.dt-vazio { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 2px; }
.dt-vazio-icone {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text3);
  margin-bottom: 0.4rem;
}
.dt-vazio-titulo { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.dt-vazio-texto { font-size: 0.86rem; color: var(--text3); max-width: 460px; line-height: 1.55; }
.dt-vazio-compacto { padding: 0; }

/* Erro: pedido inexistente ou sem acesso */
/* Pedido inexistente ou sem acesso: inscrição curta sob o fio de tinta */
.detalhe-erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin-top: 10vh;
  padding-top: 18px;
  border-top: 2px solid var(--tinta);
}
.detalhe-erro-titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.detalhe-erro-texto { font-size: 0.95rem; color: var(--text2); line-height: 1.6; margin-bottom: 8px; }

/* Modais do detalhe: fio de tinta no topo, número do pedido em numerais sobre o título */
.dt-modal .modal { border-top: 2px solid var(--tinta); }
.dt-modal .dt-modal-cab { align-items: flex-start; }
.dt-modal-tit { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-modal-num {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-modal-pedido { margin-left: 10px; font-family: var(--font); font-weight: 500; letter-spacing: 0; }
.dt-modal .modal-header h2 { font-size: 1.3rem; letter-spacing: -0.01em; }
.dt-modal .modal-header .btn-icon { margin-top: 2px; }
.modal-intro { font-size: 0.9rem; color: var(--text2); line-height: 1.6; margin-bottom: 1.2rem; }
.modal-resumo {
  background: var(--card2);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-resumo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.95rem; color: var(--text); }
.modal-resumo-linha .dt-numeral { font-size: 1.3rem; color: var(--text); white-space: nowrap; }
.modal-resumo-sub { font-size: 0.8rem; color: var(--text3); }
.form-label-falso { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text2); margin-bottom: 0.4rem; }
.dropzone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-input);
  background: var(--card2);
  color: var(--text2);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.dropzone:hover,
.dropzone:focus-within { border-color: var(--gold-border); color: var(--text); outline: 2px solid var(--gold); outline-offset: 1px; }
.dropzone span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-urgente-wrap { margin-top: 0.5rem; cursor: pointer; }
.modal-comparar { max-width: 920px; }
/* Sugestões de fornecedor (datalist) sem a seta nativa do navegador */
#modal-compra input[list]::-webkit-calendar-picker-indicator,
#modal-cotacao input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* ── Banner de reabertura (4.7) ──────────────────────── */
.reaberto-banner {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 5px 10px 5px 9px;
  border-left: 2px solid var(--gold);
  background: var(--gold-dim);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text2);
}
.reaberto-banner svg { color: var(--gold); width: 14px; height: 14px; }
.reaberto-link {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
}
.reaberto-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Configurações ───────────────────────────────────── */
/* Empresas, Categorias, Fornecedores, Usuários e Ajustes: cada um é uma tela
   com o título da inscrição (como PEDIDOS); a navegação entre elas fica na
   barra lateral. Listas são "livros": fio de tinta no alto, linhas finas e
   nenhuma caixa em volta. */

/* Cabeçalho: título e frase à esquerda, ação à direita */
.cfg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}
.cfg-head-titulo { min-width: 0; }
.cfg-titulo { overflow-wrap: anywhere; }
.cfg-resumo {
  margin-top: 14px;                 /* mesmo ritmo da frase sob PEDIDOS */
  max-width: 36rem;
  min-height: 1.5em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text2);
  font-variant-numeric: tabular-nums lining-nums;
}
.cfg-resumo-num { color: inherit; }   /* frase num tom só, como em PEDIDOS */
.cfg-head-acoes { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding-top: 0.2rem; }
.cfg-btn-novo { min-height: 38px; padding: 0 1.1rem; }
.cfg-btn-curto { display: none; }

/* Barra de filtros: filtros em texto à esquerda, busca à direita */
.cfg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.cfg-filtros { display: flex; align-items: center; gap: 0 1.6rem; }
/* Abas como as de Pedidos: o ativo leva o traço terracota embaixo */
.cfg-filtro {
  position: relative;
  min-height: 36px;
  padding: 0 1px;
  gap: 0.5rem;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text3);
}
.cfg-filtro::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}
@media (hover: hover) {
  .cfg-filtro:hover:not(.active) { color: var(--text); }
  .cfg-filtro:hover:not(.active)::after { background: var(--border-strong); }
}
.cfg-filtro.active { color: var(--text); }
.cfg-filtro.active::after { background: var(--gold-fill); }
.cfg-filtro-n {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text3);
  font-variant-numeric: tabular-nums lining-nums;
}
.cfg-filtro.active .cfg-filtro-n { color: var(--gold); }
.cfg-filtro:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.cfg-busca { width: 280px; max-width: 100%; }
.cfg-busca input { width: 100%; min-height: 38px; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.cfg-busca input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 0.4rem;
  cursor: pointer;
  background: var(--text3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cfg-busca input::-webkit-search-cancel-button:hover { background: var(--text); }

/* Livro: tabela sem caixa, com o fio de tinta no alto */
.cfg-livro { border-top: 2px solid var(--tinta); }
/* Colunas fixas: a largura não pula quando a busca esvazia a tabela */
.cfg-tabela { table-layout: fixed; }
.cfg-tabela thead th {
  padding: 0.85rem 1rem 0.7rem;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
  border-bottom: 1px solid var(--border-strong);
}
.cfg-tabela tbody tr,
.cfg-tabela tbody tr:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) { .cfg-tabela tbody tr:hover { background: var(--card); } }
.cfg-tabela tbody tr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cfg-tabela tbody td { padding: 0.9rem 1rem; }
.cfg-tabela tbody td:first-child { color: inherit; font-weight: inherit; }
.cfg-tabela th.c-acoes, .cfg-tabela td.c-acoes { width: 56px; text-align: right; padding-left: 0.25rem; padding-right: 0.5rem; }
.cfg-tabela .c-num { width: 110px; text-align: right; white-space: nowrap; }
.cfg-tabela .c-valor { width: 160px; text-align: right; white-space: nowrap; }
.cfg-tabela td:is(.c-num, .c-valor) {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.cfg-btn-editar { width: 32px; height: 32px; min-height: 32px; border-color: transparent; color: var(--text3); }
.cfg-btn-editar:focus-visible { border-color: var(--border-strong); color: var(--text); }
@media (hover: hover) { .cfg-tabela tbody tr:hover .cfg-btn-editar { border-color: var(--border-strong); color: var(--text); } }
/* Toque: sem o realce de passagem que "gruda" depois do toque */
@media (hover: none) { .cfg-tabela tbody tr:hover { background: none; } }
.cfg-mudo { color: var(--text3); font-weight: 500; }
.cfg-mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
input.cfg-mono { font-size: 0.85rem; }

/* Esqueleto de carregamento */
.cfg-linha-esq, .cfg-linha-esq:hover { cursor: default; background: none !important; }
.cfg-esq { display: block; height: 12px; width: 70%; border-radius: var(--radius-tag); }
.cfg-linha-esq td:first-child .cfg-esq { width: 55%; height: 14px; }
.cfg-esq-card { display: block; height: 100%; min-height: 196px; border-radius: 0; }

/* Ponto de cor (perfil, status, categoria): texto com um ponto, nunca etiqueta */
.cfg-ponto {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--cor, var(--text3));
}
.cfg-perfil { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text2); font-weight: 500; white-space: nowrap; }
.cfg-status {
  --cor: var(--text3);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
}
.cfg-status.is-ativo { --cor: var(--green); color: var(--text2); }
/* Inativo: o ponto fica vazado */
.cfg-status:not(.is-ativo) .cfg-ponto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text3); }

/* Usuários */
.usr-tabela .c-usuario { width: 38%; }
.usr-tabela .c-perfil { width: 150px; }
.usr-tabela .c-acesso { width: 160px; white-space: nowrap; }
.usr-tabela td.c-acesso { color: var(--text2); font-variant-numeric: tabular-nums lining-nums; }
.usr-tabela td.c-empresas { color: var(--text2); }
.usr-cel { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.usr-avatar { flex-shrink: 0; background: var(--card2); border-color: var(--border-strong); color: var(--text2); }
.usr-id { min-width: 0; }
.usr-nome { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.usr-nome-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-email { margin-top: 0.1rem; font-size: 0.8rem; font-weight: 400; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Você", "Inativo": rótulo da inscrição ao lado do nome */
.cfg-marca {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold);
}
.cfg-marca-inativo { color: var(--text3); }
.cfg-linha-inativa :is(.usr-nome-txt, .usr-email, .usr-avatar, .cfg-perfil, .usr-emp) { opacity: 0.55; }
.usr-emp { display: inline-flex; align-items: baseline; gap: 0.45rem; max-width: 100%; min-width: 0; }
.usr-emp-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-emp-mais { flex-shrink: 0; font-family: var(--display); font-weight: 700; }
/* Sessão atual: ponto oliva, como quem está presente */
.usr-acesso-agora { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); }
.usr-acesso-agora::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--green); }

/* Estado vazio (dentro de tabela ou grade) */
.cfg-linha-vazia, .cfg-linha-vazia:hover { cursor: default; background: none !important; }
.cfg-linha-vazia > td { padding: 0 !important; }
.cfg-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
}
.cfg-vazio-icone { margin-bottom: 0.9rem; color: var(--text3); }
.cfg-vazio-titulo {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.cfg-vazio-sub { margin-top: 0.4rem; max-width: 360px; font-size: 0.84rem; line-height: 1.55; color: var(--text3); overflow-wrap: anywhere; }
.cfg-vazio-acao { margin-top: 1.1rem; }

/* Empresas: placas com o fio de tinta no alto e os numerais da inscrição
   (como o cabeçalho de cada etapa no quadro de pedidos) */
.emp-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.emp-grade.is-vazio { display: block; border-top: 2px solid var(--tinta); }
.emp-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.1rem 1.25rem 1.3rem;
  background: var(--card);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.light .emp-cartao { box-shadow: var(--shadow-sm); }
@media (hover: hover) { .emp-cartao:hover { background: var(--card2); } }
.emp-cartao:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.emp-cartao.is-esqueleto { padding: 0; cursor: default; min-height: 196px; }
.emp-cab { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.emp-nome {
  flex: 1;
  min-width: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-cab .cfg-status { font-size: 0.8rem; }
.emp-editar { display: flex; color: var(--text3); opacity: 0; transition: opacity var(--transition-fast); align-self: center; }
.emp-cartao:hover .emp-editar, .emp-cartao:focus-visible .emp-editar { opacity: 1; }
.emp-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.3rem; font-size: 0.82rem; color: var(--text3); line-height: 1.5; }
.emp-meta .cfg-mono { color: var(--text2); }
.emp-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: auto 0 0;
  padding-top: 1.05rem;
  border-top: 1px dashed var(--border-strong);
}
.emp-meta + .emp-numeros { margin-top: 1.25rem; }
.emp-num { display: flex; flex-direction: column; min-width: 0; }
.emp-num .numeral { order: -1; margin: 0 0 0.4rem; font-size: 2.6rem; color: var(--text); }
.emp-num dt { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.emp-num-sub { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--text3); }
.emp-num-sub span { color: var(--text2); }
.emp-cartao.is-inativa .emp-nome { color: var(--text2); }
.emp-cartao.is-inativa :is(.numeral, .emp-num dt) { color: var(--text3); }

/* Categorias: ponto quadrado na cor da categoria e a régua de uso */
.cfg-cat { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; max-width: 100%; }
.cfg-cat-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-tag);
  background: var(--cor, var(--text3));
}
.cfg-cat-nome, .forn-nome { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tabela .c-tipo { width: 170px; }
.cat-tabela .c-uso { width: 36%; text-align: right; }
.cfg-tipo-propria { color: var(--text2); }
.cfg-uso { display: flex; align-items: center; gap: 1rem; }
.cfg-uso-trilho { flex: 1; height: 3px; background: var(--line); }
.cfg-uso-barra { display: block; width: var(--p, 0%); height: 100%; background: var(--cor, var(--text3)); }
.cfg-uso-n {
  min-width: 2.2ch;
  text-align: right;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Fornecedores */
.forn-tabela .c-cnpj { width: 200px; white-space: nowrap; }
.forn-tabela td.c-nome, .cat-tabela td.c-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forn-tabela td.c-valor { font-size: 1rem; }

/* Modais de configurações: fio de tinta no alto e o título na voz da inscrição */
.cfg-modal { max-width: 540px; border-top: 2px solid var(--tinta); border-radius: 0 0 var(--radius) var(--radius); }
.cfg-modal-sm { max-width: 460px; }
.cfg-modal .modal-header { align-items: flex-start; padding: 1.4rem 1.25rem 1.15rem 1.5rem; }
.cfg-modal .modal-header h2 {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cfg-modal .modal-header .btn-icon { margin-top: -0.2rem; border-color: transparent; }
.cfg-modal .modal-header .btn-icon:hover { border-color: var(--border-strong); }
.cfg-modal .modal-body { padding-top: 1.35rem; }
.cfg-modal-head { min-width: 0; }
.cfg-modal-sub { margin-top: 0.45rem; font-size: 0.84rem; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-modal-sub[hidden] { display: none; }
/* Botões escondidos (o Salvar do Supremo travado): o display dos botões não pode vencer o [hidden] */
.cfg-modal .modal-footer [hidden] { display: none; }
.cfg-form { gap: 1.15rem 1rem; }
.cfg-form-pilha { display: flex; flex-direction: column; gap: 1.15rem; }
.cfg-form .col-span-2 { grid-column: span 2; }
.cfg-req { color: var(--gold); font-weight: 600; }
.cfg-rotulo-campo { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text2); }
.cfg-rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cfg-link {
  padding: 0;
  margin-bottom: 0.4rem;
  min-height: 0;
  border: none;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  cursor: pointer;
}
.cfg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cfg-link[hidden] { display: none; }
.form-group .form-hint[hidden] { display: none; }
.cfg-form input:disabled, .cfg-form select:disabled { opacity: 0.65; cursor: not-allowed; }

/* Interruptor de cantos retos (a pílula fica só para avatar e ponto) */
.cfg-interruptor {
  min-height: 40px;
  padding: 0 0.15rem;
  border-radius: var(--radius-sm);
  outline: none;
}
.cfg-interruptor .toggle { border-radius: var(--radius-sm); }
.cfg-interruptor .toggle::after { border-radius: 2px; }
.cfg-interruptor:focus-visible .toggle { box-shadow: 0 0 0 3px var(--gold-dim); border-color: var(--gold-border); }
.cfg-interruptor[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.form-group.invalido .cfg-interruptor .toggle { border-color: var(--red-border); }

/* Descrição do perfil: um fio na cor do ponto do perfil */
.cfg-perfil-desc {
  margin-top: -0.3rem;
  padding: 0.15rem 0 0.15rem 0.85rem;
  border-left: 2px solid var(--cor, var(--border-strong));
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text2);
}
.cfg-perfil-desc[hidden] { display: none; }

.cfg-checklist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card2);
  overflow: hidden;
}
.cfg-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cfg-check:first-child { border-top: none; }
.cfg-check:hover { background: var(--card3); }
.cfg-check:has(input:checked) .cfg-check-nome { font-weight: 600; }
.cfg-check:has(input:disabled) { cursor: not-allowed; opacity: 0.7; }
.cfg-check-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-check-meta { flex-shrink: 0; font-family: var(--mono); font-size: 0.7rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.cfg-check-estado { flex-shrink: 0; font-family: var(--font); font-size: 0.74rem; font-weight: 600; letter-spacing: 0;color: var(--text3); }
.cfg-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.form-group.invalido .cfg-checklist { border-color: var(--red-border); }

.cfg-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
}
.cfg-aviso svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--amber); }
.cfg-aviso[hidden] { display: none; }

.cfg-linha-interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card2);
}
.cfg-linha-interruptor .cfg-rotulo-campo { margin-bottom: 0.1rem; color: var(--text); }
.cfg-linha-desc { font-size: 0.76rem; color: var(--text3); }
#emp-ativa-grupo[hidden] { display: none; }

/* Cor da categoria: amostras quadradas, como o ponto da categoria na lista */
.cfg-cores { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cfg-cor {
  position: relative;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cfg-cor::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: var(--radius-tag);
  background: var(--cor);
}
.cfg-cor:hover { border-color: var(--border-strong); }
.cfg-cor.active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.cfg-cor:focus-visible { outline: 2px solid var(--gold-border); outline-offset: 2px; }
/* Prévia: a categoria como ela aparece na lista */
.cfg-previa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.9rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.cfg-previa .cfg-rotulo-campo { margin: 0; flex-shrink: 0; font-family: var(--font); font-size: 0.8rem; font-weight: 600; letter-spacing: 0;color: var(--text3); }
.cfg-previa .cfg-cat { max-width: 70%; }

/* Ajustes: seções com o rótulo da inscrição e itens em linhas, sem caixas
   (título e descrição à esquerda, controle à direita) */
.cfg-pagina-estreita .cfg-head,
.cfg-pagina-estreita .cfg-secao { max-width: 760px; }
.cfg-secao + .cfg-secao { margin-top: 2.5rem; }
.cfg-secao .rotulo-secao { margin-bottom: 0.35rem; }
.cfg-lista { display: flex; flex-direction: column; }
.cfg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.cfg-item-texto { min-width: 0; flex: 1; }
.cfg-item-titulo { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.cfg-item-desc { margin-top: 0.2rem; max-width: 460px; font-size: 0.84rem; line-height: 1.55; color: var(--text3); }
.cfg-item-acao { flex-shrink: 0; min-height: 36px; }
.cfg-item-conta { justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.cfg-item-conta .avatar { flex-shrink: 0; }
.cfg-item-conta .cfg-item-titulo { font-size: 1.05rem; }
/* Fatos do acesso: rótulo da inscrição à esquerda, valor à direita */
.cfg-fatos { display: grid; gap: 0.7rem; margin: 1rem 0 0; font-size: 0.86rem; line-height: 1.55; }
.cfg-fatos > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: baseline; }
.cfg-fatos dt {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
}
.cfg-fatos dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.8rem; min-width: 0; }
.cfg-fatos .cfg-perfil { color: var(--text); font-weight: 600; }
.cfg-fatos .cfg-ponto { align-self: center; }
.cfg-fatos .cfg-esq { width: 12rem; align-self: center; }
.cfg-fatos-forte { color: var(--text); font-weight: 600; }
.cfg-fatos-desc { color: var(--text3); }

/* Controle segmentado (tema): o mesmo desenho do quadro/lista e do período */
.cfg-seg {
  flex-shrink: 0;
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.cfg-seg-op {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
}
.cfg-seg-op + .cfg-seg-op { border-left: 1px solid var(--border-strong); }
.cfg-seg-op:hover:not(.active) { color: var(--text); background: var(--card3); }
.cfg-seg-op.active { color: var(--text); background: var(--card3); box-shadow: inset 0 -2px 0 var(--gold-fill); }
.cfg-seg-op:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

/* ── Configurações no celular ── */
@media (max-width: 767px) {
  /* Folha do modal fica sobre a barra inferior (sem ela, Salvar ficaria coberto) */
  body:has(#modal-usuario.visible, #modal-empresa.visible, #modal-categoria.visible, #modal-forn-edit.visible) .bottom-nav { display: none; }

  /* Cabeçalho: título e ação na mesma linha; a frase embaixo, na largura toda */
  .cfg-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titulo acoes" "resumo resumo";
    align-items: center;
    gap: 0 0.75rem;
    margin-bottom: 1.4rem;
  }
  .cfg-head-titulo { display: contents; }
  .cfg-titulo { grid-area: titulo; font-size: 2rem; line-height: 1; }
  .cfg-resumo { grid-area: resumo; margin-top: 0.6rem; font-size: 0.86rem; }
  .cfg-head-acoes { grid-area: acoes; padding-top: 0; }
  .cfg-btn-novo { min-height: 38px; padding: 0 0.9rem; }
  .cfg-btn-rotulo { display: none; }
  .cfg-btn-curto { display: inline; }
  /* Fornecedores: a busca desce para uma linha própria, abaixo da frase */
  .cfg-fornecedores .cfg-head { grid-template-areas: "titulo titulo" "resumo resumo" "acoes acoes"; }
  .cfg-fornecedores .cfg-head-acoes { margin-top: 1rem; }
  .cfg-head-acoes .cfg-busca { width: 100%; }

  .cfg-toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .cfg-filtros { gap: 0 1.4rem; }
  .cfg-busca { width: 100%; }
  .cfg-busca input { min-height: 40px; }

  /* Livros: cada linha vira um bloco, ainda sem caixa em volta */
  .cfg-tabela thead { display: none; }
  .cfg-tabela, .cfg-tabela tbody { display: block; }
  .cfg-tabela tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.9rem 0.1rem 0.95rem;
  }
  .cfg-tabela tbody td { display: block; min-width: 0; max-width: none !important; width: auto !important; padding: 0 !important; border: none; text-align: left; }
  .cfg-tabela td.c-acoes { grid-column: -2; grid-row: 1; align-self: start; justify-self: end; margin: -0.35rem -0.35rem 0 0; }
  .cfg-btn-editar { width: 36px; height: 36px; min-height: 36px; }

  .cfg-tabela tbody tr.cfg-linha-vazia,
  .cfg-tabela tbody tr.cfg-linha-esq { display: block; padding: 0; }
  .cfg-tabela tbody tr.cfg-linha-esq { padding: 1rem 0.1rem; }
  .cfg-tabela tbody tr.cfg-linha-esq td + td { display: none; }
  .cfg-linha-vazia .cfg-vazio { padding: 2.5rem 1rem; }

  /* Usuários: nome e e-mail; perfil e último acesso; empresas */
  .usr-tabela tbody tr {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "usr usr acoes" ". perfil acesso" ". emp emp";
    row-gap: 0.3rem;
  }
  .usr-tabela td.c-usuario { grid-area: usr; }
  .usr-tabela td.c-acoes { grid-area: acoes; }
  .usr-tabela td.c-perfil { grid-area: perfil; margin-top: 0.35rem !important; font-size: 0.84rem; }
  .usr-tabela td.c-acesso { grid-area: acesso; justify-self: end; margin-top: 0.35rem !important; font-size: 0.8rem; }
  .usr-tabela td.c-empresas { grid-area: emp; font-size: 0.82rem; }
  .usr-cel { gap: 0.75rem; }
  .usr-tabela td.c-acesso::before {
    content: attr(data-rotulo) " ";
    font-family: var(--font);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text3);
  }

  /* Categorias: nome em cima; tipo e a régua de uso embaixo */
  .cat-tabela tbody tr { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto; grid-template-areas: "nome nome acoes" "tipo uso uso"; }
  .cat-tabela td.c-nome { grid-area: nome; }
  .cat-tabela td.c-acoes { grid-area: acoes; }
  .cat-tabela td.c-tipo { grid-area: tipo; padding-left: 1.4rem !important; font-size: 0.82rem; }
  .cat-tabela td.c-uso { grid-area: uso; padding-right: 0.25rem !important; }
  .cat-tabela .cfg-uso-n::after { content: attr(data-sufixo); font-family: var(--font); font-size: 0.84rem; font-weight: 500; color: var(--text3); }

  /* Fornecedores: nome em cima; CNPJ, pedidos e valor embaixo */
  /* Colunas de largura fixa: pedidos e valor alinham de uma linha para a outra */
  .forn-tabela tbody tr { grid-template-columns: minmax(0, 1fr) 4.6rem 6.3rem; grid-template-areas: "nome nome acoes" "cnpj num valor"; column-gap: 0.75rem; }
  .forn-tabela td.c-cnpj .cfg-mono { font-size: 0.72rem; }
  .forn-tabela td.c-nome { grid-area: nome; }
  .forn-tabela td.c-acoes { grid-area: acoes; }
  .forn-tabela td.c-cnpj { grid-area: cnpj; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .forn-tabela td.c-num { grid-area: num; font-size: 0.86rem !important; text-align: right; }
  .forn-tabela td.c-num::after { content: attr(data-sufixo); font-family: var(--font); font-weight: 500; color: var(--text3); }
  .forn-tabela td.c-valor { grid-area: valor; font-size: 0.92rem !important; text-align: right; }

  /* Empresas */
  .emp-grade { grid-template-columns: 1fr; gap: 1rem; }
  .emp-cartao { padding: 1rem 1rem 1.15rem; }
  .emp-num .numeral { font-size: 2.3rem; }
  .emp-editar { opacity: 1; }

  /* Modais */
  .cfg-modal { border-radius: 0; }
  .cfg-modal .modal-header { padding: 1.15rem 1rem 1rem 1.25rem; }
  .cfg-modal .modal-header h2 { font-size: 1.45rem; }
  .cfg-form.form-grid-2 { grid-template-columns: 1fr; }
  .cfg-form .col-span-2 { grid-column: auto; }
  /* Numa coluna só, a descrição do perfil fica logo abaixo do perfil escolhido */
  #modal-usuario [data-campo="usr-ativo"] { order: 1; }
  #modal-usuario [data-campo="usr-empresas"] { order: 2; }
  .cfg-check { min-height: 48px; }
  .cfg-check-meta { display: none; }
  .cfg-cor { width: 36px; height: 36px; min-height: 36px; }

  /* Ajustes */
  .cfg-item { flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 1.1rem 0; }
  .cfg-item-conta { flex-direction: row; }
  .cfg-fatos > div { grid-template-columns: 1fr; }
  .cfg-item-acao { align-self: flex-start; min-height: 38px; }
  .cfg-seg { align-self: flex-start; }
  .cfg-seg-op { min-height: 34px; }
}