/* cell.ia — estilo do portal. CSS escrito à mão, sem framework e sem etapa de build.
   Valores (cor, fonte, espaço, raio) vêm de tokens.css; aqui só var(--...).
   Seções: base · layout · menu · cabeçalho · componentes · telas · acesso · celular · impressão. */

/* =========================================================================== base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

h1, h2, h3 { font-weight: var(--peso-forte); line-height: 1.25; margin: 0; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); margin: var(--e-5) 0 var(--e-2); }
p { margin: 0 0 var(--e-3); }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
code, pre { font-family: var(--fonte-mono); font-size: .875em; }
strong { font-weight: var(--peso-forte); }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.menu, .cabecalho, .acesso { --foco: var(--azul-claro); }

/* Ícones do sprite (static/icones.svg): traço reto, cor do texto. */
svg.icone {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: square; stroke-linejoin: miter;
  vertical-align: -.25em;
}
svg.icone-pequeno { width: 1em; height: 1em; }

/* Números: Arial com algarismos tabulares (a Nippo não tem 'tnum'). */
.num, td.num, th.num, .indicador-valor, .contador {
  font-family: var(--fonte-numeros);
  font-variant-numeric: tabular-nums;
}
td.num, th.num { text-align: right; white-space: nowrap; }

.suave { color: var(--texto-suave); font-size: var(--t-sm); }
.texto-livre { white-space: pre-wrap; }
.introducao { color: var(--texto-suave); max-width: 72ch; margin-bottom: var(--e-5); }
.secao-titulo {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin: var(--e-6) 0 var(--e-3);
}
.secao-titulo:first-child { margin-top: 0; }

/* Só para leitor de tela (continua no HTML). */
.so-leitor {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; left: var(--e-2); top: -100px; z-index: 100;
  background: var(--branco); color: var(--escuro-marca); padding: var(--e-2) var(--e-3);
}
.pular:focus { top: var(--e-2); }

/* ========================================================================= layout */
.layout {
  display: grid;
  grid-template-columns: var(--largura-menu) minmax(0, 1fr);
  min-height: 100vh;
  /* pinta a coluna do menu até o fim de páginas longas (o menu é sticky, da altura da janela) */
  background: linear-gradient(to right, var(--menu-fundo) var(--largura-menu), transparent 0);
}
.principal { display: flex; flex-direction: column; min-width: 0; }
.corpo { flex: 1; min-width: 0; }
.centro { padding: var(--e-6) var(--e-8) var(--e-12); min-width: 0; }
.centro:focus { outline: none; }

/* =========================================================================== menu */
.menu {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--menu-fundo);
  color: var(--menu-texto);
  border-right: 1px solid var(--menu-borda);
  overflow-y: auto;
  z-index: 30;
}
.menu-topo {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--altura-cabecalho); padding: 0 var(--e-5);
  border-bottom: 1px solid var(--menu-borda);
}
.menu-marca { display: block; line-height: 0; padding: var(--e-1) 0; }
.menu-marca img { width: 150px; height: auto; }
.menu .menu-fechar { display: none; }
.menu-itens { padding: var(--e-4) var(--e-3); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  color: var(--menu-texto); text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--raio) var(--raio) 0;
}
.menu li a:hover { color: var(--menu-texto-forte); background: rgba(255, 255, 255, .05); }
.menu li a[aria-current="page"] {
  color: var(--menu-texto-forte); background: var(--menu-ativo);
  border-left-color: var(--azul-claro); font-weight: var(--peso-medio);
}
.menu-titulo {
  margin: var(--e-5) 0 var(--e-1); padding: 0 var(--e-3);
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  text-transform: uppercase; letter-spacing: .08em; color: var(--menu-rotulo);
}
/* Assinatura Picelli: discreta, com área de não interferência em volta do logo. */
.menu-assinatura {
  margin-top: auto;
  padding: var(--e-6) var(--e-6) var(--e-6);
  border-top: 1px solid var(--menu-borda);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.menu-assinatura-rotulo { font-size: var(--t-xs); color: var(--menu-rotulo); letter-spacing: .04em; }
.menu-assinatura img { width: 104px; height: auto; }
.menu-veu { display: none; }

/* ====================================================================== cabeçalho */
.cabecalho {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-4);
  min-height: var(--altura-cabecalho);
  padding: var(--e-2) var(--e-8);
  background: var(--menu-fundo); color: var(--menu-texto-forte);
  border-bottom: 1px solid var(--menu-borda);
}
.cabecalho-titulo { flex: 1; min-width: 0; }
.cabecalho h1 {
  font-size: var(--t-xl); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cabecalho-voltar { margin: 0; font-size: var(--t-xs); }
.cabecalho-voltar a { color: var(--azul-claro); text-decoration: none; display: inline-flex; gap: var(--e-1); align-items: center; }
.cabecalho-voltar a:hover { text-decoration: underline; }
.cabecalho-referencia {
  margin: 0; font-size: var(--t-xs); color: var(--menu-texto);
  display: flex; align-items: center; gap: var(--e-1);
}
.cabecalho-acoes { display: flex; align-items: center; gap: var(--e-2); }
.cabecalho-acoes form { margin: 0; }
.cabecalho .botao.secundario, .usuario-menu summary {
  background: transparent; color: var(--menu-texto-forte);
  border: 1px solid var(--menu-borda);
}
.cabecalho .botao.secundario:hover, .usuario-menu summary:hover { background: rgba(255, 255, 255, .06); }
.cabecalho .botao[aria-pressed="true"] { border-color: var(--azul-claro); color: var(--azul-claro); }
.cabecalho .menu-abrir { display: none; }

.usuario-menu { position: relative; }
.usuario-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-3); border-radius: var(--raio);
}
.usuario-menu summary::-webkit-details-marker { display: none; }
.usuario-menu[open] summary { background: rgba(255, 255, 255, .08); }
.usuario-painel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--painel); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-flutuante); padding: var(--e-2); z-index: 40;
}
.usuario-nome { font-weight: var(--peso-forte); margin: var(--e-2) var(--e-3) 0; }
.usuario-papel { font-size: var(--t-sm); color: var(--texto-suave); margin: 0 var(--e-3) var(--e-2); }
.usuario-painel form { margin: 0; }
.usuario-link {
  display: flex; align-items: center; gap: var(--e-2); width: 100%;
  padding: var(--e-2) var(--e-3); border: 0; background: none; border-radius: var(--raio);
  color: var(--texto); text-decoration: none; font: inherit; text-align: left; cursor: pointer;
  border-top: 1px solid var(--borda);
}
.usuario-link:hover { background: var(--realce); }

/* ======================================================= contador (menu do quadro) */
.contador {
  display: inline-block; min-width: 1.5em; padding: 0 .4em; text-align: center;
  background: var(--acento); color: var(--branco); border-radius: var(--raio);
  font-size: var(--t-xs); letter-spacing: 0;
}
.menu-contador { margin-left: auto; }

/* ==================================================================== componentes */

/* ---- botões ---- */
button { font: inherit; color: inherit; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-4);
  font: inherit; font-weight: var(--peso-medio); line-height: 1.2;
  background: var(--acento); color: var(--branco);
  border: 1px solid var(--acento); border-radius: var(--raio);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.botao:hover { background: var(--acento-hover); border-color: var(--acento-hover); text-decoration: none; }
.botao.secundario { background: var(--painel); color: var(--texto); border-color: var(--borda-forte); }
.botao.secundario:hover { background: var(--realce); }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }
.botao.perigo:hover { filter: brightness(.92); }
/* Ação destrutiva secundária (Rejeitar, Remover): contorno vermelho, sem o peso do primário. */
.botao.perigo-contorno { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao.perigo-contorno:hover { background: var(--erro-fundo); }
.botao.pequeno { min-height: 32px; padding: 0 var(--e-3); font-size: var(--t-sm); }
.botao.largo { width: 100%; }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; color: inherit; border: 1px solid transparent;
  border-radius: var(--raio); cursor: pointer;
}
.botao-icone:hover { background: rgba(255, 255, 255, .08); }
.botao-icone svg.icone { width: 22px; height: 22px; }
.acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-4); }
.acoes form { margin: 0; }

/* ---- formulários ---- */
input, select, textarea {
  font: inherit; color: var(--texto);
  min-height: 40px; padding: var(--e-2) var(--e-3);
  background: var(--painel);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
input:hover, select:hover, textarea:hover { border-color: var(--neutro-500); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
input:disabled { background: var(--painel-alt); color: var(--texto-suave); cursor: not-allowed; }
textarea { width: 100%; min-height: 6rem; resize: vertical; }
.campo { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-4); }
.campo label { font-weight: var(--peso-medio); font-size: var(--t-sm); }
.campo input, .campo select { max-width: 28rem; }
.campo-ajuda { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
.campo-mensagem-erro { margin: 0; font-size: var(--t-sm); color: var(--erro); font-weight: var(--peso-medio); }
.campo-erro input, .campo-erro select { border-color: var(--erro); }
.formulario { max-width: 44rem; }
.form-inline { display: inline-flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin: 0; }
.filtros {
  display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--e-5);
}
.filtros .campo { margin: 0; }
.filtros-acao { margin-left: auto; }

/* Interruptor sim/não (Configuração). O texto "sim"/"não" continua visível. */
.interruptor {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: none; border: 0; padding: var(--e-1); cursor: pointer;
  font-size: var(--t-sm); color: var(--texto-suave);
}
.interruptor-trilho {
  position: relative; width: 34px; height: 18px; flex: none;
  background: var(--borda-forte); border-radius: var(--raio);
}
.interruptor-trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  background: var(--branco); border-radius: 1px; transition: left .15s;
}
.interruptor[aria-pressed="true"] { color: var(--texto); font-weight: var(--peso-medio); }
.interruptor[aria-pressed="true"] .interruptor-trilho { background: var(--acento); }
.interruptor[aria-pressed="true"] .interruptor-trilho::after { left: 19px; }

/* ---- cartão ---- */
.cartao {
  background: var(--painel);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e-5) var(--e-6);
  margin-bottom: var(--e-4);
}
.cartao > h2 { margin-bottom: var(--e-3); }
.cartao-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-3);
}
.cartao-cabecalho h2 { margin: 0; }
.desabilitado { opacity: .65; }

/* ---- cartão de indicador ---- */
.indicadores {
  display: grid; gap: var(--e-4); margin-bottom: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.indicador {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--borda); border-top: 3px solid var(--azul-marca);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: var(--e-4) var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.indicador p { margin: 0; }
.indicador-rotulo { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-suave); }
.indicador-valor { font-size: var(--t-2xl); font-weight: var(--peso-forte); line-height: 1.1; letter-spacing: -.01em; }
.indicador-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  font-size: var(--t-xs); color: var(--texto-suave); margin-top: auto;
}
.indicador-data { display: inline-flex; align-items: center; gap: var(--e-1); }
.indicador-nota { font-size: var(--t-xs); color: var(--texto-suave); }
.indicador-texto { border-top-color: var(--borda-forte); font-size: var(--t-sm); }
.indicador-velho { border-top-color: var(--atencao-borda); }
.indicador-aviso {
  display: flex; gap: var(--e-2); align-items: flex-start;
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  color: var(--atencao); background: var(--atencao-fundo);
  padding: var(--e-2) var(--e-3); border-radius: var(--raio);
}

/* ---- selo ---- */
.selo {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 1px var(--e-2);
  font-size: var(--t-xs); font-weight: var(--peso-medio); line-height: 1.5; white-space: nowrap;
  color: var(--texto-suave); background: var(--painel);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  vertical-align: middle;
}
.selo svg.icone { width: 14px; height: 14px; }
/* [validado-doc]: discreto. */
.selo.validado { color: var(--sucesso); background: transparent; border-color: transparent; padding-left: 0; }
.selo.validado .selo-texto { color: var(--texto-suave); font-weight: var(--peso-normal); }
/* NÃO VALIDADO: bem visível. */
.selo.nao-validado {
  color: var(--atencao); background: var(--atencao-fundo);
  border-color: var(--atencao-borda); font-weight: var(--peso-forte); letter-spacing: .02em;
}
/* Dica do selo (alvo e data): no mouse e no foco do teclado. */
.selo[data-dica] { cursor: help; }
.selo[data-dica]:hover::after, .selo[data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 50;
  width: max-content; max-width: 18rem; white-space: normal;
  padding: var(--e-2) var(--e-3);
  background: var(--escuro-marca); color: var(--branco);
  font-size: var(--t-xs); font-weight: var(--peso-normal); letter-spacing: 0; line-height: 1.4;
  border-radius: var(--raio); box-shadow: var(--sombra-flutuante);
}

/* ---- etiqueta e status ---- */
.etiqueta {
  display: inline-block; padding: 0 var(--e-2);
  font-size: var(--t-xs); font-weight: var(--peso-medio); line-height: 1.7;
  border-radius: var(--raio); border: 1px solid transparent;
  background: var(--painel-alt); color: var(--texto-suave); border-color: var(--borda);
}
.etiqueta-info { background: var(--info-fundo); color: var(--info); border-color: transparent; }
.etiqueta-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); border-color: transparent; }
.etiqueta-atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: transparent; }
.etiqueta-erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.status { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: var(--peso-medio); }
.status svg.icone { width: 16px; height: 16px; }
.ok { color: var(--sucesso); }
.falha { color: var(--erro); }

/* ---- avisos ---- */
.aviso {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4);
  background: var(--atencao-fundo); color: var(--texto);
  border: 1px solid var(--atencao-borda); border-left-width: 4px; border-radius: var(--raio);
}
.aviso > svg.icone { color: var(--atencao); margin-top: .1em; }
.aviso p:last-child { margin-bottom: 0; }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); }
.aviso-erro > svg.icone { color: var(--erro); }
.aviso-info { background: var(--info-fundo); border-color: var(--info); }
.aviso-info > svg.icone { color: var(--info); }

/* ---- estado vazio ---- */
.vazio {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-5); margin-bottom: var(--e-4);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  color: var(--texto-suave); background: transparent;
}
.vazio p { margin: 0; }
.vazio-mensagem { color: var(--texto); font-weight: var(--peso-medio); }
.vazio-dica { font-size: var(--t-sm); }

/* ---- tabela ---- */
.tabela-rolagem {
  overflow: auto; max-height: min(72vh, 56rem);
  background: var(--painel);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: var(--e-5);
}
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--painel); }
.tabela th, .tabela td {
  text-align: left; vertical-align: top;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borda);
  background: var(--painel);
}
.tabela tbody tr:nth-child(even) > * { background: var(--painel-alt); }
.tabela tbody tr:hover > * { background: var(--realce); }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela thead th {
  position: sticky; top: 0; z-index: 2;
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave);
  background: var(--painel); border-bottom: 1px solid var(--borda-forte);
  white-space: nowrap;
}
/* Primeira coluna fixa ao rolar na horizontal. */
.tabela-rolagem .tabela tr > :first-child { position: sticky; left: 0; z-index: 1; }
.tabela-rolagem .tabela thead tr > :first-child { z-index: 3; }
.tabela .num { text-align: right; }
.tabela td > .form-inline, .tabela td > form { margin: 0; }
.tabela-compacta { margin-bottom: var(--e-3); border: 1px solid var(--borda); }
.tabela-compacta td { padding: var(--e-1) var(--e-3); vertical-align: middle; }
.tabela-os td:first-child { font-weight: var(--peso-forte); }

/* ---- Configuração: usuários e acessos (#93) ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  padding: 0 2px 0 var(--e-2); font-size: var(--t-xs); line-height: 1.8;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 12px;
}
.chip-x {
  background: none; border: 0; cursor: pointer; padding: 0 var(--e-1);
  font-size: var(--t-sm); line-height: 1; color: var(--texto-suave); border-radius: 50%;
}
.chip-x:hover { color: var(--erro); }
.chip-add {
  font-size: var(--t-xs); color: var(--link); cursor: pointer;
  padding: 0 var(--e-2); border: 1px dashed var(--borda-forte); border-radius: 12px;
  background: var(--painel);
}
select.chip-add { min-height: 0; height: 22px; width: auto; padding: 0 var(--e-1) 0 var(--e-2); }
.chip-ok {
  min-height: 0; height: 22px; padding: 0 var(--e-2); cursor: pointer;
  font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--texto);
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.form-inline:has(> .chip-add) { gap: var(--e-1); }
/* Com static/auto-envio.js carregado, o select grava ao escolher e o botão some. */
.auto-envio .reserva-auto-envio { display: none; }
/* Usuários: largura mínima; no celular a tabela rola na horizontal (o nome fica fixo). */
.tabela-usuarios { min-width: 60rem; }
.tabela-usuarios td { vertical-align: middle; }
.tabela-usuarios td.areas .chips, .tabela-usuarios td.areas .form-inline { flex-wrap: nowrap; }
.chave { display: inline-flex; align-items: center; gap: var(--e-1); cursor: pointer; font-size: var(--t-sm); }
.chave input { margin: 0; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 var(--e-4); }
fieldset.campo legend { padding: 0; margin-bottom: var(--e-1); }
.campo-legenda { font-weight: var(--peso-medio); font-size: var(--t-sm); }
.campo .chave { font-weight: var(--peso-medio); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.painel-pessoa { max-width: 44rem; }
.acessos-controles {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: flex-end;
  margin-bottom: var(--e-3);
}
.area-edicao form + form { margin-top: var(--e-3); }
.matriz-rolagem { max-height: none; margin-bottom: var(--e-4); }
.matriz th, .matriz td { padding: 3px var(--e-2); vertical-align: middle; }
.matriz tbody tr:nth-child(even) > * { background: var(--painel); }
.matriz th.cap { min-width: 16rem; white-space: nowrap; font-weight: var(--peso-normal); }
.matriz th.cap code { margin-left: var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }
.matriz thead th.area { text-align: center; min-width: 6rem; text-transform: none; letter-spacing: 0; }
.matriz thead th.area a { color: var(--texto); font-size: var(--t-sm); text-decoration: underline dotted; }
.matriz thead th.area.inativa a { color: var(--texto-suave); text-decoration: line-through; }
.area-n { display: block; font-family: var(--fonte-numeros); font-weight: var(--peso-normal); }
.matriz td.c { text-align: center; }
.matriz td.pessoas { min-width: 15rem; }
.matriz tr.grupo > th {
  background: var(--painel); font-size: var(--t-sm); font-weight: var(--peso-forte);
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto);
  border-top: 2px solid var(--borda-forte); padding-top: var(--e-2); padding-bottom: var(--e-2);
}
/* Do segundo grupo em diante, espaço acima para separar do grupo anterior. */
.matriz tbody tr.grupo:not(:first-child) > th { padding-top: var(--e-5); }
/* O rótulo do grupo fica visível ao rolar na horizontal (a célula ocupa a linha toda). */
.grupo-rotulo { position: sticky; left: var(--e-2); }
.marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  background: var(--painel); color: var(--branco);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.marca[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }
.marca:disabled { opacity: .45; cursor: not-allowed; }
.dar-pessoa { display: inline-block; }
.dar-pessoa > summary { list-style: none; display: inline-block; }
.dar-pessoa > summary::-webkit-details-marker { display: none; }
.dar-pessoa[open] > form { margin-top: var(--e-1); }
.historico-acessos > summary { cursor: pointer; font-weight: var(--peso-medio); }
.historico-acessos[open] > summary { margin-bottom: var(--e-3); }
/* Cor e sinal por sentido da mudança (o sinal fica visível; não só a cor). */
.mudanca-sinal { display: inline-block; width: 1em; font-weight: var(--peso-forte); text-align: center; }
.mudanca-mais td:last-child { color: var(--sucesso); }
.mudanca-menos td:last-child { color: var(--erro); }

.paginacao {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3);
  margin: var(--e-4) 0;
}
.paginacao > :last-child { justify-self: end; }
.paginacao-atual { color: var(--texto-suave); font-size: var(--t-sm); }

/* ---- abas ---- */
.abas {
  display: flex; gap: var(--e-1); margin: var(--e-6) 0 var(--e-5);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto; scrollbar-width: thin;
}
.abas a {
  padding: var(--e-3) var(--e-4); margin-bottom: -1px;
  color: var(--texto-suave); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.abas a:hover { color: var(--texto); border-bottom-color: var(--borda-forte); }
.abas a[aria-current="page"] { color: var(--texto); font-weight: var(--peso-forte); border-bottom-color: var(--azul-marca); }

/* ---- bloco de código ---- */
.codigo-bloco { position: relative; margin-bottom: var(--e-5); }
.codigo-copiar { position: absolute; top: var(--e-2); right: var(--e-2); }
pre.codigo {
  margin: 0; padding: var(--e-4); padding-top: var(--e-10);
  max-height: 70vh; overflow: auto; white-space: pre;
  background: var(--painel-alt); color: var(--texto);
  border: 1px solid var(--borda); border-left: 3px solid var(--azul-marca); border-radius: var(--raio);
  font-size: var(--t-sm); line-height: 1.55;
}

/* ---- listas de metadados ---- */
.quadro-meta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--e-3) var(--e-5); margin: var(--e-3) 0;
}
.quadro-meta dt { font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.quadro-meta dd { margin: 0; }
.lista-simples { list-style: none; padding: 0; margin: 0 0 var(--e-3); }
.lista-simples li { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; padding: var(--e-2) 0; border-bottom: 1px solid var(--borda); }
.linha-rotulo { display: flex; align-items: center; gap: var(--e-2); }

/* ========================================================================== telas */

/* ---- início ---- */
.buscador { margin-bottom: var(--e-6); }
.buscador label { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-medio); margin-bottom: var(--e-2); }
.buscador input { width: 100%; min-height: 48px; font-size: var(--t-lg); }
.atalhos {
  display: grid; gap: var(--e-3); margin-bottom: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.atalho {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4); text-decoration: none; color: var(--texto);
  background: var(--painel); border: 1px solid var(--borda); border-left: 3px solid var(--azul-marca);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.atalho:hover { border-color: var(--azul-marca); background: var(--realce); }
.atalho > svg.icone { width: 28px; height: 28px; color: var(--link); }
.atalho > span { display: flex; flex-direction: column; }

/* ---- pauta: o que é dado × o que é interpretação ---- */
.leitura {
  position: relative;
  background: var(--realce);
  border-left: 4px solid var(--azul-marca);
  padding: var(--e-5) var(--e-6);
  margin-bottom: var(--e-6);
  font-weight: var(--peso-leve);
  font-size: var(--t-lg); line-height: 1.6;
}
.leitura h2 { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.leitura p:last-child { margin-bottom: 0; }
.leitura-origem {
  font-size: var(--t-xs); font-weight: var(--peso-medio); line-height: 1.4;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
}
.leitura-secao { font-size: var(--t-md); padding: var(--e-3) var(--e-4); margin: var(--e-4) 0 0; }
.dado-referencia { display: flex; align-items: center; gap: var(--e-1); }
.tabela-pauta { border: 1px solid var(--borda); }
.tabela-pauta th[scope="row"] { font-weight: var(--peso-normal); }
.tabela-pauta td.num { font-weight: var(--peso-forte); width: 1%; }
.tabela-pauta td.num .selo { margin-left: var(--e-2); }

/* ---- quadro ---- */
.quadro-cartoes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.quadro-cartao {
  display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: var(--e-4) var(--e-5);
}
.quadro-cartao:hover { border-color: var(--borda-forte); }
.quadro-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; }
.quadro-titulo { font-size: var(--t-md); }
.quadro-titulo a { color: var(--texto); text-decoration: none; }
.quadro-titulo a:hover { color: var(--link); text-decoration: underline; }
.quadro-cartao .quadro-meta { margin: var(--e-1) 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--t-sm); }
.decisao { padding: var(--e-3) 0 0; border-top: 1px solid var(--borda); }
.quadro-tempo { font-size: var(--t-sm); margin: 0; }
.quadro-expira { font-weight: var(--peso-medio); }
.quadro-detalhe > .quadro-etiquetas { margin-bottom: var(--e-4); }
.quadro-detalhe > .quadro-tempo { margin: calc(-1 * var(--e-2)) 0 var(--e-4); }
.quadro-form { display: flex; flex-direction: column; gap: var(--e-1); }
.quadro-form-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-4); }

/* Origem do item: nome e data, trecho citado, link. */
.origem { margin: var(--e-4) 0 0; }
.origem-linha { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.origem-trecho { margin: 0 0 var(--e-2); }
.origem-trecho figcaption {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin-bottom: var(--e-1);
}
.origem-trecho blockquote {
  margin: 0; padding: var(--e-2) var(--e-4);
  border-left: 3px solid var(--borda-forte); background: var(--realce); font-style: italic;
}
.origem-tecnica { font-size: var(--t-xs); margin: 0; }
/* Linha apontada pelo link de origem do quadro. */
tr:target { background: var(--realce); outline: 2px solid var(--foco); }

/* Barra de ações no fim do cartão: primário à esquerda; motivo + ação secundária à direita. */
.barra-acoes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
}
/* Barra sozinha no cartão (ex.: Remover): sem a linha de cima. */
.cartao > .barra-acoes:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rejeitar-linha { display: flex; align-items: center; gap: var(--e-2); flex: 1 1 22rem; justify-content: flex-end; }
.rejeitar-linha input { flex: 1 1 auto; max-width: 28rem; min-height: 40px; }
.comentarios { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.comentarios li { padding: var(--e-3) 0; border-bottom: 1px solid var(--borda); }
.comentarios p { margin: 0; }
.comentario-autor { margin-bottom: var(--e-1) !important; }

/* ---- configuração ---- */
/* Pessoas: um formulário por linha; os campos dividem a largura da tabela. */
.tabela-pessoas input, .tabela-pessoas select { width: 100%; min-width: 7rem; }
.tabela-pessoas td { vertical-align: middle; }
.senha-provisoria { font-size: var(--t-xl); font-weight: var(--peso-forte); letter-spacing: .05em; display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* ========================================================================= acesso */
/* Login, troca de senha e erro: Dark Blue, logo cell.ia, símbolo PL grande recortado. */
body.acesso { background: var(--escuro-marca); color: var(--branco); min-height: 100vh; overflow-x: hidden; }
.acesso-layout {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-10);
  padding: 12vh clamp(1.5rem, 9vw, 9rem) var(--e-8);
}
.acesso-painel { position: relative; z-index: 1; width: 100%; max-width: 24rem; }
.acesso-logo { width: 100%; max-width: 360px; height: auto; margin-bottom: var(--e-10); }
.acesso h1 { font-size: var(--t-xl); margin-bottom: var(--e-5); }
.acesso .campo label { color: var(--neutro-300); }
.acesso .campo input, .acesso .campo select { max-width: none; width: 100%; background: var(--branco); color: var(--escuro-marca); border-color: var(--branco); }
.acesso .campo-ajuda { color: var(--neutro-400); }
.acesso-form { margin-bottom: var(--e-3); }
.acesso-form .botao { margin-top: var(--e-2); }
.acesso .botao.secundario { background: transparent; color: var(--branco); border-color: var(--neutro-600); }
.acesso .botao.secundario:hover { background: rgba(255, 255, 255, .06); }
.acesso form + form, .acesso p { margin-top: var(--e-3); }
.acesso-mensagem { color: var(--neutro-300); font-size: var(--t-lg); }
.acesso .aviso { background: var(--atencao-fundo); color: var(--escuro-marca); }
.acesso-assinatura { position: relative; z-index: 1; }
.acesso-assinatura img { width: 168px; height: auto; }
/* Aplicação do manual (pág. 9): o símbolo grande em Safe Blue, cortado pela borda direita. */
.acesso-arte { position: fixed; inset: 0 0 0 auto; width: 46vw; overflow: hidden; pointer-events: none; }
.acesso-arte img { position: absolute; top: -10vh; right: -16vh; height: 122vh; width: auto; }

@media (prefers-color-scheme: dark) {
  .acesso .aviso { color: var(--texto); }
  .acesso .campo input { background: var(--neutro-850); color: var(--texto); border-color: var(--neutro-700); }
}

/* ============================================================== telas intermediárias */
@media (max-width: 1024px) {
  .acesso-arte { width: 38vw; opacity: 1; }
}

/* ---- busca do topo e ficha da OS (#64) ---- */
.busca-topo { display: flex; align-items: center; gap: var(--e-1); }
.busca-topo input {
  width: 13rem; min-height: 40px;
  background: transparent; color: var(--menu-texto-forte); border-color: var(--menu-borda);
}
.busca-topo input::placeholder { color: var(--menu-texto); }
/* Ficha da OS: compacta (a ficha típica cabe em 1366×768 sem rolar). */
.ficha-sobre {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4);
  margin-bottom: var(--e-3); padding: var(--e-2) var(--e-3);
  background: var(--neutro-100); border: 1px dashed var(--neutro-500); border-radius: var(--raio);
  font-size: var(--t-xs); color: var(--texto-suave);
}
.ficha-sobre strong { color: var(--texto); }
.ficha-sobre-quem {
  font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .08em;
  padding-right: var(--e-3); border-right: 1px solid var(--neutro-300);
}
.ficha-sobre-alerta { color: var(--atencao); display: inline-flex; align-items: center; gap: var(--e-1); }
.ficha-resumo.cartao, .ficha-etapas.cartao, .ficha-dados.cartao, .ficha-notas.cartao, .ficha-tempo.cartao {
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3);
}
.ficha-resumo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-6); align-items: center; }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0; }
.ficha-fatos { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.ficha-fatos strong { color: var(--texto); font-weight: var(--peso-medio); }
.ficha-fato-longo { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-total { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; }
.ficha-total span { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.ficha-total strong { font-size: var(--t-xl); }
.ficha-etapas { display: flex; list-style: none; }
.ficha-etapa { flex: 1; position: relative; padding-top: var(--e-4); font-size: var(--t-sm); }
.ficha-etapa::before {
  content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sucesso); border: 2px solid var(--sucesso); box-sizing: border-box;
}
.ficha-etapa-vazada::before { background: var(--painel); border-color: var(--neutro-500); }
.ficha-etapa::after { content: ""; position: absolute; left: 16px; right: 8px; top: 4px; height: 2px; background: var(--borda); }
.ficha-etapa:last-child::after { display: none; }
.ficha-etapa span { display: block; font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.ficha-corpo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 var(--e-3); align-items: start; }
.ficha-corpo-so-tempo { grid-template-columns: minmax(0, 1fr); }
.ficha-h {
  font-size: var(--t-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave); margin: 0 0 var(--e-1);
}
.ficha-grupo + .ficha-grupo { border-top: 1px solid var(--borda); margin-top: var(--e-2); padding-top: var(--e-2); }
.ficha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-5); margin: 0; font-size: var(--t-sm); }
.ficha-campos div { display: flex; gap: var(--e-2); min-width: 0; }
.ficha-campos dt { color: var(--texto-suave); white-space: nowrap; }
.ficha-campos dd { margin: 0; font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-sem-acesso { color: var(--texto-suave); font-style: italic; font-weight: normal !important; }
.ficha-nota-pe, .ficha-vazios { margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--texto-suave); }
.ficha-vazios { margin-top: var(--e-2); }
.ficha-direita { min-width: 0; }
.ficha-nota { margin: 0 0 var(--e-1); font-size: var(--t-sm); }
.ficha-nota-rotulo { color: var(--texto-suave); }
.ficha-nota summary { cursor: pointer; list-style: none; }
.ficha-nota summary::-webkit-details-marker { display: none; }
.ficha-nota-texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; }
.ficha-nota summary::after { content: "ver mais"; color: var(--link); font-size: var(--t-xs); text-decoration: underline; }
.ficha-nota[open] .ficha-nota-texto { -webkit-line-clamp: unset; }
.ficha-nota[open] summary::after { content: "ver menos"; }
.ficha-tempo-lista { max-height: 19rem; overflow: auto; border-left: 2px solid var(--borda); padding-left: var(--e-3); }
.ficha-dia { font-size: var(--t-xs); font-weight: var(--peso-forte); margin: var(--e-2) 0 0; }
.ficha-dia:first-child { margin-top: 0; }
.ficha-tempo-lista ul { list-style: none; margin: 0; padding: 0; }
.ficha-ev { display: flex; gap: var(--e-2); align-items: baseline; font-size: var(--t-sm); padding: 1px 0; }
.ficha-ev-origem {
  flex: none; min-width: 5.2rem; text-align: center; font-size: var(--t-xs); font-weight: var(--peso-forte);
  border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto-suave);
}
.ficha-ev-cellia { color: var(--azul-marca); border-color: var(--azul-marca); }
.ficha-ev-hora { flex: none; min-width: 2.6rem; font-size: var(--t-xs); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ficha-ev-texto { min-width: 0; overflow-wrap: anywhere; }
/* Ficha do cliente (#94, #107): cabeçalho com "Mais dados do cliente" e as OS na largura toda. */
.ficha-cabecalho { display: block; }
.ficha-razao { font-size: var(--t-md); margin-right: var(--e-2); }
.ficha-etiquetas .ficha-razao { align-self: center; }
.ficha-fatos-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-1) var(--e-5); margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.ficha-fatos-grade dt { font-size: var(--t-xs); color: var(--texto-suave); }
.ficha-fatos-grade dd { margin: 0; font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.ficha-fatos-grade small { color: var(--texto-suave); font-weight: var(--peso-normal); font-size: var(--t-xs); }
.ficha-mais { border-top: 1px solid var(--borda); margin-top: var(--e-3); }
.ficha-mais > summary { cursor: pointer; padding-top: var(--e-2); font-size: var(--t-sm); color: var(--link); width: max-content; }
.ficha-mais-corpo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: var(--e-5); padding-top: var(--e-3); }
.ficha-mais-coluna { min-width: 0; }
.ficha-contatos { table-layout: fixed; }
.ficha-tabela.ficha-contatos td { white-space: normal; overflow-wrap: anywhere; max-width: none; vertical-align: top; }
.ficha-contatos-tipo { width: 6.5rem; }
.ficha-contatos-nome { width: 32%; }
.ficha-encerradas-titulo { margin-top: var(--e-4); }
.valor-zero { color: var(--texto-suave); }
.ficha-tabela td.ficha-pedidos { font-family: var(--fonte-numeros); font-variant-numeric: tabular-nums; }
/* Etapas da oficina: uma coluna por etapa, a coluna com muitas OS rola por dentro. */
.etapas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e-2); margin-top: var(--e-2); }
.etapa {
  min-width: 0; padding: var(--e-2); background: var(--painel-alt); border: 1px solid var(--borda);
  border-top: 4px solid var(--etapa-cor, var(--neutro-400)); border-radius: var(--raio);
}
.etapa-recebimento { --etapa-cor: var(--azul-claro); }
.etapa-avaliacao { --etapa-cor: var(--info); }
.etapa-em_orcamento { --etapa-cor: var(--atencao-borda); }
.etapa-em_processo { --etapa-cor: var(--sucesso); }
.etapa-finalizada { --etapa-cor: var(--neutro-500); }
.etapa-entregue_sem_faturar { --etapa-cor: var(--erro); }
.etapa-outra { --etapa-cor: var(--neutro-300); }
.etapa-titulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); margin: 0 0 var(--e-2);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
}
.etapa-titulo b { font-size: var(--t-lg); letter-spacing: 0; color: var(--texto); }
.etapa-sentido { display: block; text-transform: none; letter-spacing: 0; font-weight: var(--peso-normal); }
.etapa-vazia { opacity: .6; }
.etapa-nada { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
.etapa-cartoes { display: flex; flex-direction: column; gap: var(--e-1); max-height: 17rem; overflow: auto; }
.etapa-cartao { padding: var(--e-1) var(--e-2); background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); font-size: var(--t-sm); }
.etapa-cartao p { margin: 0; }
.etapa-cartao-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.etapa-cartao-l1 a { font-weight: var(--peso-forte); }
.etapa-cartao-equip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa-cartao-datas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }
.etapa-cartao-datas span { white-space: nowrap; }
.etapa-antigas > summary { cursor: pointer; font-size: var(--t-xs); color: var(--link); padding: var(--e-1) 0; }
.etapa-antigas .etapa-cartao { margin-top: var(--e-1); }
.selo-fat { display: inline-block; padding: 0 var(--e-1); border: 1px solid transparent; border-radius: var(--raio); font-size: var(--t-xs); font-weight: var(--peso-forte); }
.selo-fat-sim { color: var(--sucesso); background: var(--sucesso-fundo); }
.selo-fat-nao { color: var(--erro); background: var(--erro-fundo); }
.etapas-legenda { margin-top: var(--e-1); }
.etapas-legenda + .etapas-legenda { margin-top: 0; }
.ficha-campos .ficha-campo-largo { grid-column: 1 / -1; }
.ficha-h-nota { font-weight: var(--peso-normal); text-transform: none; letter-spacing: 0; }
.ficha-tabela { width: 100%; border-collapse: collapse; margin-top: var(--e-2); font-size: var(--t-sm); }
.ficha-tabela th {
  font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--texto-suave); text-align: left;
  padding: 2px var(--e-2); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.ficha-tabela td {
  padding: 2px var(--e-2); border-bottom: 1px solid var(--neutro-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem;
}
.ficha-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.ficha-tabela td.ficha-data { text-align: left; }
.ficha-tabela-rolagem { max-height: 26rem; overflow: auto; }
.ficha-os-cliente .ficha-tabela { margin-top: 0; }
/* Resultados da busca (#94). */
.busca-secao.cartao { padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3); }

/* ======================================================================== celular */
@media (max-width: 900px) {
  :root { --altura-cabecalho: 56px; }
  .layout { grid-template-columns: minmax(0, 1fr); background: none; }
  .cabecalho { padding: var(--e-2) var(--e-4); gap: var(--e-2); }
  .cabecalho h1 { font-size: var(--t-lg); white-space: normal; }
  .centro { padding: var(--e-5) var(--e-4) var(--e-10); }
  .quadro-form-linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .barra-acoes { flex-direction: column; align-items: stretch; }
  .rejeitar-linha { flex-direction: column; align-items: stretch; flex-basis: auto; }
  .rejeitar-linha input { max-width: none; }

  /* Sem JavaScript: menu empilhado acima do conteúdo. */
  .menu { position: static; height: auto; }

  /* Com JavaScript: o menu vira gaveta. */
  .js .menu {
    position: fixed; inset: 0 auto 0 0; width: min(85vw, 300px); height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease-out;
    box-shadow: var(--sombra-flutuante);
  }
  .js .menu-aberto .menu { transform: translateX(0); }
  .js .cabecalho .menu-abrir, .js .menu .menu-fechar { display: inline-flex; }
  .js .menu-veu:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 25; background: rgba(13, 20, 27, .6);
  }
  .menu-aberto { overflow: hidden; }

  .rotulo-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cabecalho .botao.secundario, .usuario-menu summary { padding: 0 var(--e-2); min-width: 40px; }
  /* Busca numa linha própria, abaixo do título e dos botões. */
  .cabecalho { flex-wrap: wrap; }
  .cabecalho-acoes { display: contents; }
  .busca-topo { order: 10; flex: 1 1 100%; padding-bottom: var(--e-1); }
  .busca-topo input { flex: 1; width: auto; min-width: 0; }
  /* Ficha do cliente e busca no celular: uma coluna, sem as colunas largas; etapas empilhadas. */
  .ficha-larga, .busca-larga { display: none; }
  .ficha-fatos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-mais-corpo { grid-template-columns: minmax(0, 1fr); }
  .etapas { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .etapa-vazia .etapa-nada { display: none; }
  .etapa-vazia .etapa-titulo { margin: 0; }
  .ficha-corpo, .ficha-resumo, .ficha-campos { grid-template-columns: minmax(0, 1fr); }
  .ficha-total { grid-column: 1; grid-row: auto; text-align: left; }
  .ficha-etapas { flex-wrap: wrap; gap: var(--e-2); }
  .ficha-etapa { flex: 1 1 45%; }
  .ficha-etapa::after { display: none; }
  .ficha-tempo-lista { max-height: none; }
  .ficha-campos dd { white-space: normal; }
  .ficha-ev-hora:empty { display: none; }

  .indicadores { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--e-3); }
  .indicador { padding: var(--e-3) var(--e-4); }
  .indicador-valor { font-size: var(--t-xl); }
  .leitura { padding: var(--e-4); font-size: var(--t-md); }
  .cartao { padding: var(--e-4); }
  .tabela-rolagem { max-height: none; }
  .tabela-rolagem .tabela tr > :first-child { box-shadow: 1px 0 0 var(--borda); }
  .filtros .campo { flex: 1 1 9rem; }
  .filtros .campo select { width: 100%; }
  .filtros-acao { margin-left: 0; flex: 1 1 100%; }
  .quadro-cartoes { grid-template-columns: minmax(0, 1fr); }

  .acesso-layout { padding: var(--e-10) var(--e-5) var(--e-6); }
  .acesso-logo { margin-bottom: var(--e-8); }
  .acesso-arte { display: none; }
}

@media (max-width: 480px) {
  .matriz th.cap { min-width: 9.5rem; max-width: 10.5rem; white-space: normal; }
  .matriz th.cap code { display: block; margin: 0; }
  .matriz td.pessoas { min-width: 12rem; }
  .tabela-pauta th[scope="row"] { font-size: var(--t-sm); }
  .tabela-pauta td.num .selo { margin: var(--e-1) 0 0; display: flex; width: max-content; margin-left: auto; }
  .paginacao { grid-template-columns: 1fr 1fr; }
  .paginacao-atual { grid-row: 2; grid-column: 1 / -1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ====================================================================== impressão */
@media print {
  .menu, .cabecalho-acoes, .menu-abrir, .pular { display: none !important; }
  .layout, .corpo { display: block; }
  .cabecalho { position: static; background: none; color: #000; border: 0; padding: 0 0 1rem; }
  .tabela-rolagem { max-height: none; overflow: visible; box-shadow: none; }
}