/* Estilos do app de coleta. Tudo dirigido pelos tokens do design system BNI. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-strong);
  background: var(--surface-subtle);
}
#root { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--text-brand); }

/* Cabeçalho */
.topo { background: var(--surface-page); border-bottom: var(--border-width) solid var(--border-subtle); }
.topo-linha {
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-4);
}
.topo-divisor { width: var(--border-width); align-self: stretch; background: var(--border-default); }
.topo-titulo {
  font-size: var(--text-body-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body);
}
.topo-org {
  margin-left: auto; font-size: var(--text-overline);
  letter-spacing: var(--tracking-caps-wide); text-transform: uppercase; color: var(--text-muted);
}
.topo-usuario {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.topo-usuario-nome { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.topo-usuario-papel {
  font-size: var(--text-overline); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}

/* Tela de login */
.login-tela {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-4);
  background: var(--surface-subtle); padding: var(--space-5);
}
.login-cartao {
  width: 100%; max-width: 380px; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle); border-top: var(--border-accent) solid var(--bni-red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.login-marca { margin-bottom: var(--space-1); }
.login-titulo {
  font-size: var(--text-body-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body);
}
.login-sub { margin: calc(var(--space-2) * -1) 0 0; color: var(--text-muted); font-size: var(--text-body-sm); }
.login-senha {
  min-height: 0; height: auto; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.login-rodape { font-size: var(--text-caption); color: var(--text-muted); }

/* Corpo: menu lateral + conteúdo */
.corpo { display: flex; flex: 1; align-items: stretch; }
.lateral {
  width: 248px; flex-shrink: 0;
  background: var(--surface-page);
  border-right: var(--border-width) solid var(--border-subtle);
  padding: var(--space-4) 0 var(--space-6);
  transition: width var(--transition-base);
  overflow: hidden;
}
.lateral nav { position: sticky; top: var(--space-4); display: flex; flex-direction: column; }
.grupo-menu { display: flex; flex-direction: column; gap: var(--space-1); }
.grupo-menu + .grupo-menu { margin-top: var(--space-5); }
.grupo-menu-rotulo {
  padding: 0 var(--space-4); margin-bottom: var(--space-2);
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden;
}
.item-menu {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-2) var(--space-4);
  border: none; background: none; font: inherit;
  font-size: var(--text-body-sm); color: var(--text-body);
  border-left: var(--border-accent) solid transparent;
  text-align: left; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.item-menu:hover { background: var(--grey-50); color: var(--text-strong); }
.item-menu.ativo {
  border-left-color: var(--bni-red);
  background: var(--bni-red-tint);
  color: var(--bni-red);
  font-weight: var(--weight-medium);
}
.item-menu svg { flex-shrink: 0; }
.item-menu-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral.recolhida { width: 64px; }
.lateral.recolhida .item-menu { justify-content: center; padding-left: var(--space-2); padding-right: calc(var(--space-2) + var(--border-accent)); }
.lateral.recolhida .item-menu-rotulo { display: none; }
.lateral.recolhida .grupo-menu-rotulo { display: none; }
.lateral.recolhida .grupo-menu + .grupo-menu {
  margin-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  padding-top: var(--space-4);
}

/* Conteúdo */
.conteudo {
  flex: 1; min-width: 0; width: 100%; max-width: var(--container-xl);
  margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8);
}

/* Resumo */
.resumo-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--space-5); }
.cartao-frente { cursor: pointer; transition: box-shadow var(--transition-base); }
.cartao-frente:hover { box-shadow: var(--shadow-md); }
.cartao-frente-entregavel {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-caption); color: var(--text-muted);
}
.resumo-secao { margin-top: var(--space-7); }
.resumo-aviso { margin-top: var(--space-6); }

/* Barra de progresso (artefatos) */
.progresso-trilha {
  height: var(--space-2); background: var(--grey-100);
  border-radius: var(--radius-sm); overflow: hidden; margin-top: var(--space-3);
}
.progresso-preenchimento { height: 100%; background: var(--bni-red); transition: width var(--transition-base); }
.progresso-legenda { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }

/* Barra de ações da entidade */
.toolbar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: var(--space-5) 0 var(--space-4); }
.toolbar-busca { flex: 1; min-width: calc(var(--space-10) * 2); }
.toolbar-contagem { font-size: var(--text-caption); color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Tabela */
.tabela-envelope {
  overflow-x: auto; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thick) solid var(--border-subtle);
  white-space: nowrap;
}
.tabela td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-sm); color: var(--text-body);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--grey-50); }
.tabela tbody tr.linha-clicavel { cursor: pointer; }
.tabela tbody tr.linha-clicavel:hover { background: var(--bni-red-tint); }
.celula-forte { color: var(--text-strong); font-weight: var(--weight-medium); }
.celula-acoes { text-align: right; white-space: nowrap; width: 1%; }
.celula-acoes .acao { margin-left: var(--space-1); }
.artefato-numero { color: var(--text-brand); font-weight: var(--weight-bold); }
.celula-artefato { white-space: normal; max-width: 48ch; }
.link-detalhe { color: var(--text-strong); font-weight: var(--weight-medium); text-decoration: none; }
.link-detalhe:hover { color: var(--bni-red); text-decoration: underline; }
.linha-secundaria { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-1); }

/* Página de detalhe do artefato */
.voltar {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; margin-bottom: var(--space-4);
}
.voltar:hover { color: var(--bni-red); }
.detalhe-acoes { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0; }
.detalhe-atualizado { margin: 0; }
.detalhe-secao { margin-bottom: var(--space-6); }
.detalhe-secao .grupo-menu-rotulo { padding: 0; margin-bottom: var(--space-3); }
.detalhe-areas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.detalhe-texto { white-space: pre-line; color: var(--text-body); line-height: var(--leading-relaxed); }
.link-externo {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--bni-red); text-decoration: none; font-weight: var(--weight-medium);
}
.link-externo:hover { text-decoration: underline; color: var(--bni-red-hover); }
.vazio { padding: var(--space-8) var(--space-5); text-align: center; color: var(--text-muted); }
.vazio p { margin: 0 0 var(--space-4); }

/* Formulário */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.campo-cheio { grid-column: 1 / -1; }
.campo-rotulo {
  display: block; font-size: var(--text-body-sm); color: var(--text-body);
  font-weight: var(--weight-medium); margin-bottom: var(--space-1);
}
.campo-textarea {
  width: 100%; font: inherit; font-size: var(--text-body-md); color: var(--text-strong);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-card);
  min-height: var(--space-9); resize: vertical;
}
.campo-textarea:focus { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--border-width); }
.form-erro { margin-bottom: var(--space-4); }

/* Ficha completa de um registro */
.ficha-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
}
.ficha-rotulo {
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-1);
}
.ficha-valor { color: var(--text-strong); font-size: var(--text-body-md); word-break: break-word; }
.ficha-item-longa {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}
@media (max-width: 900px) { .ficha-grade { grid-template-columns: 1fr; } }

/* Grupos de acesso (papéis) */
.papel-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.papel-titulo { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-strong); }
.papel-secao {
  padding: 0; margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle);
}
.papel-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); }
.papel-switches { display: flex; flex-direction: column; gap: var(--space-3); }
.papel-fixo { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-body-sm); }
@media (max-width: 900px) { .papel-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .papel-areas { grid-template-columns: 1fr; } }

/* Anexos */
.lista-anexos { display: flex; flex-direction: column; }
.anexos-acoes { display: flex; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-4); }
.anexos-categoria { width: min(240px, 60%); }
.form-anexos {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--text-body-sm);
}
.linha-anexo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: var(--text-body);
}
.linha-anexo:last-child { border-bottom: none; }
.linha-anexo-nome { flex: 1; min-width: 0; }
.linha-anexo-nome .link-detalhe { word-break: break-word; }

/* Placeholders de carregamento (skeleton): pulsam até os dados chegarem */
@keyframes esqueleto-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.esqueleto {
  display: block;
  background: var(--grey-100);
  border-radius: var(--radius-sm);
  animation: esqueleto-pulso 1.15s ease-in-out infinite;
}
th .esqueleto, td .esqueleto { display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; opacity: 0.7; } }

.carregando-inicial {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--surface-subtle); padding: var(--space-5);
}
.carregando-cartao {
  width: 100%; max-width: 360px; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--border-accent) solid var(--bni-red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.carregando-cartao .esqueleto { margin-top: var(--space-1); }

/* Registros vinculados (relação reversa na ficha, ex.: sistemas de um fornecedor) */
.lista-vinculos { display: flex; flex-direction: column; }
.linha-vinculo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; text-decoration: none; color: var(--text-body);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.linha-vinculo:last-child { border-bottom: none; }
.linha-vinculo svg { color: var(--text-muted); flex-shrink: 0; }
.linha-vinculo:hover .link-detalhe { color: var(--bni-red); text-decoration: underline; }
.vinculos-acao { margin-top: var(--space-4); }

/* Configurações · troca de senha */
.form-config { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
.config-acao { margin-top: var(--space-1); }
.config-nota { margin: 0; font-size: var(--text-caption); color: var(--text-muted); }

/* Aviso flutuante */
.aviso-flutuante {
  position: fixed; top: var(--space-5); right: var(--space-5); z-index: 70;
  max-width: var(--container-sm); box-shadow: var(--shadow-lg);
}

/* Diálogos nunca estouram a tela */
[role="dialog"] { max-width: calc(100vw - var(--space-5)); }

/* O SectionHeading do design system limita o subtítulo a 52ch (estilo inline);
   aqui o subtítulo ocupa a largura toda, sem quebra de linha artificial. */
.titulo-secao p { max-width: none !important; }

/* Rodapé */
.rodape { border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-page); }
.rodape-linha {
  max-width: var(--container-xl); margin: 0 auto; padding: var(--space-4) var(--gutter);
  font-size: var(--text-caption); color: var(--text-muted);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}

@media (max-width: 900px) {
  .resumo-grade { grid-template-columns: 1fr; }
  .form-grade { grid-template-columns: 1fr; }
}

/* Celular: o menu vira uma gaveta sobreposta, controlada pelo mesmo botão do topo */
@media (max-width: 720px) {
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 248px; padding-top: var(--space-5);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .lateral:not(.recolhida) { transform: none; }
  .lateral.recolhida { width: 248px; transform: translateX(-100%); }
  .lateral.recolhida .item-menu { justify-content: flex-start; padding: var(--space-2) var(--space-4); }
  .lateral.recolhida .item-menu-rotulo { display: inline; }
  .lateral.recolhida .grupo-menu-rotulo { display: block; }
  .lateral.recolhida .grupo-menu + .grupo-menu { border-top: none; padding-top: 0; margin-top: var(--space-5); }
  .pano-de-fundo { position: fixed; inset: 0; z-index: 55; background: rgba(22, 22, 23, 0.45); }

  .topo-linha { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .topo-org, .topo-divisor { display: none; }
  .conteudo { padding: var(--space-5) var(--space-4) var(--space-7); }
  .toolbar-busca { min-width: 100%; }
  .tabela td { max-width: 22ch; }
  .rodape-linha { flex-direction: column; gap: var(--space-1); }
  .aviso-flutuante { left: var(--space-4); right: var(--space-4); top: var(--space-4); }
}