/* O que é só do ZUNNO AVARIAS, por cima do zunno.css (que é o mesmo do ZUNNO XML e não se altera aqui). */
.cabeca h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--z-titulo); }
.etapa { display: grid; gap: 8px; }
.etapa .rotulo { color: var(--z-laranja-texto); }
.etapa ul { margin: 0; padding-left: 18px; color: var(--z-texto); }
/* celular: os campos maiores para o dedo */
@media (max-width: 820px) {
  .porta-cartao input { height: 44px; font-size: 16px; }
  .cabeca h1 { font-size: 22px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* primeiro acesso: a licença colada e a empresa que ela traz */
.porta-cartao textarea { padding: 8px 9px; border-radius: 6px; border: 1px solid var(--z-cartao-borda); font: 500 12px/1.4 var(--z-mono); resize: vertical; word-break: break-all; background: var(--z-caixa-interna); color: var(--z-texto); }
.porta-cartao textarea:focus { outline: 2px solid var(--z-laranja); outline-offset: 1px; border-color: var(--z-laranja); }
.porta-cartao .caixa { display: grid; gap: 2px; }
.porta-cartao .caixa b { font-size: 15px; color: var(--z-titulo); }
.porta-cartao .porta-acoes { justify-content: space-between; gap: 8px; }
.porta-cartao [hidden] { display: none !important; }
/* ---------- etapa 2: cadastros ---------- */
.pilha-telas { display: grid; gap: 14px; min-width: 0; }
a.cartao.numero { text-decoration: none; color: inherit; }
a.cartao.numero:hover { border-color: var(--z-laranja); }
.filtros input[type="search"] { flex: 1 1 260px; }
.filtros select { flex: 0 1 220px; }
.laranja { color: var(--z-laranja-texto); }
/* o tipo do problema: falta, avaria, perda */
.tipo { display: inline-block; font: 700 10.5px var(--z-mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; border: 1px solid currentColor; }
.tipo-falta { color: var(--info-texto); }
.tipo-avaria { color: var(--z-laranja-texto); }
.tipo-perda { color: var(--perigo-texto); }
tr.inativa td { opacity: .6; }
tr.com-problema td:first-child { box-shadow: inset 3px 0 0 var(--z-laranja); }
/* a nota inteira */
.lista-ocorrencias { display: grid; gap: 10px; }
.ocorrencia { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--z-raio-p); background: var(--z-caixa-interna); border-left: 3px solid var(--z-laranja); }
.ocorrencia.situacao-resolvida { border-left-color: var(--ok-texto); }
.ocorrencia.situacao-cancelada { border-left-color: var(--z-rotulo); opacity: .75; }
.ocorrencia p { margin: 0; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--z-cartao-borda); display: grid; gap: 12px; max-height: 70vh; overflow-y: auto; }
.linha-do-tempo .evento { position: relative; display: grid; gap: 2px; font-size: 13.5px; }
.linha-do-tempo .evento::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--z-cartao); border: 2px solid var(--z-rotulo); }
.linha-do-tempo .evento-situacao::before, .linha-do-tempo .evento-ocorrencia_criada::before { border-color: var(--z-laranja); }
.linha-do-tempo .evento-resposta_industria::before { border-color: var(--info-texto); background: var(--info-texto); }
.texto-evento { margin: 4px 0 0; white-space: pre-line; color: var(--z-texto); }
/* formulário da nota nova */
.campos label.dois { grid-column: span 2; }
.campos label.inteiro, .campos > .inteiro { grid-column: 1 / -1; }
.tabela-form td { padding: 6px 6px; }
.tabela-form input, .tabela-form select { width: 100%; }
.tabela-form input.largo { min-width: 220px; }
.titulo-janela { margin: 0; font-size: 18px; color: var(--z-titulo); }
#usuario-nome { cursor: pointer; }
.aviso-caixa { margin: 0; }
@media (max-width: 820px) {
  .campos label.dois { grid-column: auto; }
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .filtros select { flex: 1 1 140px; }
}
.link-acao { background: none; border: 0; padding: 2px 0 0; font: 600 12px var(--z-fonte); color: var(--z-laranja-texto); cursor: pointer; }
.link-acao:hover { text-decoration: underline; }
/* ---------- etapa 3: fotos ---------- */
.grupo-fotos { display: grid; gap: 6px; }
.grade-fotos, .faixa-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.faixa-fotos { grid-template-columns: repeat(auto-fill, 64px); }
.miniatura-foto { position: relative; padding: 0; border: 1px solid var(--z-cartao-borda); border-radius: var(--z-raio-p); overflow: hidden; background: var(--z-caixa-interna); cursor: zoom-in; aspect-ratio: 1; }
.miniatura-foto:hover, .miniatura-foto:focus-visible { border-color: var(--z-laranja); outline: none; }
.miniatura-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-foto .tipo-foto { position: absolute; left: 4px; bottom: 4px; }
.faixa-fotos .miniatura-foto .tipo-foto { display: none; }
.mais-fotos { aspect-ratio: 1; border: 1px dashed var(--z-cartao-borda); border-radius: var(--z-raio-p); background: none; color: var(--z-texto); font: 700 14px var(--z-fonte); cursor: pointer; }
.tipo-foto { display: inline-block; font: 700 9.5px var(--z-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(11, 12, 14, .72); color: #FFFFFF; }
.tipo-foto-avaria { background: var(--z-laranja); color: #1A1A1A; }
.visor-info .tipo-foto { background: var(--z-moldura); }
.visor-info .tipo-foto-avaria { background: var(--z-laranja); }
.chips-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-fotos:empty { display: none; }
.chips-fotos button { font: 600 12px var(--z-fonte); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--z-cartao-borda); background: var(--z-cartao); color: var(--z-texto); cursor: pointer; }
.chips-fotos button.ativo { background: var(--z-laranja); border-color: var(--z-laranja); color: #1A1A1A; }
/* enviar: a área das fotos escolhidas */
.zona-fotos { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--z-cartao-borda); border-radius: var(--z-raio-p); background: var(--z-cartao); }
.zona-fotos.soltando { border-color: var(--z-laranja); background: var(--z-laranja-10); }
.zona-fotos p { margin: 0; }
.previa-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.previa-fotos:empty { display: none; }
.previa { position: relative; aspect-ratio: 1; border-radius: var(--z-raio-p); overflow: hidden; background: var(--z-caixa-interna); }
.previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.previa .tirar { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(11, 12, 14, .75); color: #FFFFFF; font: 700 15px/1 var(--z-fonte); cursor: pointer; }
/* a foto grande */
.visor { display: grid; gap: 10px; }
.visor-imagem { position: relative; display: grid; place-items: center; background: #0B0C0E; border-radius: var(--z-raio-p); min-height: 200px; }
.visor-imagem img { max-width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.visor-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(11, 12, 14, .6); color: #FFFFFF; font: 400 28px/1 var(--z-fonte); cursor: pointer; }
.visor-seta:hover { background: var(--z-laranja); color: #1A1A1A; }
.visor-seta.anterior { left: 8px; }
.visor-seta.proxima { right: 8px; }
.visor-info { display: grid; gap: 4px; }
.visor-info p { margin: 0; }
@media (max-width: 820px) {
  dialog.janela-visor { width: 100%; max-width: 100%; margin: auto 0; border-radius: 0; }
  .visor-imagem img { max-height: 60vh; }
}
/* ---------- a leitura da foto da nota e a DANFE ---------- */
.leitura { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--z-raio-p); background: var(--z-caixa-interna); }
.leitura p { margin: 0; }
.anotacoes { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.anotacoes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tipo-outro { color: var(--z-rotulo); }
.previa-lida { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.previa-lida img { width: 120px; border-radius: var(--z-raio-p); border: 1px solid var(--z-cartao-borda); display: block; }
.previa-lida p { margin: 0; }
@media (max-width: 820px) { .previa-lida { grid-template-columns: 72px minmax(0, 1fr); } .previa-lida img { width: 72px; } }
/* ---------- etapa 5: cobranças ---------- */
.erro-texto { color: var(--perigo-texto); }
.perigo-texto { color: var(--perigo-texto); font-weight: 600; }
.chip.chip-erro b { color: var(--perigo-texto); }
.chip.ativo.chip-erro b { color: inherit; }
.linha-do-tempo .evento-cobranca_enviada::before { border-color: var(--ok-texto); }
/* a faixa do alto da tela Cobranças: o que a automática está fazendo */
.faixa-cobranca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 0 var(--z-raio-p) var(--z-raio-p) 0; border-left: 3px solid var(--ok-texto); background: rgba(34, 197, 94, .1); font-size: 14px; }
.faixa-cobranca > div { flex: 1 1 320px; overflow-wrap: anywhere; }
.faixa-cobranca.parada { border-left-color: var(--z-laranja); background: var(--z-laranja-10); }
.faixa-cobranca.desligada { border-left-color: var(--z-rotulo); background: var(--z-caixa-interna); }
/* cobrar uma nota */
.mensagem-cobranca { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--z-raio-p); background: var(--z-caixa-interna); }
.mensagem-cobranca pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13.5px/1.5 var(--z-fonte); color: var(--z-texto); max-height: 34vh; overflow-y: auto; }
.mensagem-cobranca p { margin: 0; }
.acoes-cobranca { flex-wrap: wrap; gap: 8px; }
.agenda-cobranca { border-top: 1px solid var(--z-cartao-borda); padding-top: 10px; }
.agenda-cobranca summary { cursor: pointer; font-weight: 600; color: var(--z-texto); }
.agenda-cobranca[open] summary { margin-bottom: 10px; }
.agenda-cobranca .campos { margin-bottom: 10px; }
/* a chave liga/desliga (um checkbox com cara de interruptor) */
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--z-cartao-borda); transition: background .15s; flex: none; }
.interruptor .trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.interruptor input:checked + .trilho { background: var(--z-laranja); }
.interruptor input:checked + .trilho::after { transform: translateX(20px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--z-laranja); outline-offset: 2px; }
.interruptor input:disabled + .trilho { opacity: .6; }
.teste-email { flex-wrap: wrap; gap: 8px; }
.teste-email input { flex: 1 1 260px; min-width: 0; }
.campos label[hidden] { display: none; }
.linha.entre > .teste-email { flex: 1 1 420px; flex-wrap: nowrap; }
.teste-email .botao { white-space: nowrap; }
@media (max-width: 640px) { .linha.entre > .teste-email { flex-wrap: wrap; } }
/* os blocos da tela não crescem com a tabela larga (no celular a tabela rola dentro dela) */
.pilha-telas > * { min-width: 0; }
.mensagem-cobranca { background: var(--z-cartao); border: 1px solid var(--z-cartao-borda); }
/* ---------- etapa 8: relatórios ---------- */
.filtros-relatorio { flex-wrap: wrap; gap: 10px; }
.filtros .periodo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--z-rotulo); }
.filtros .periodo input { flex: 0 0 auto; }
@media (max-width: 820px) {
  .filtros .periodo { flex: 1 1 140px; }
  .filtros .periodo input { flex: 1 1 auto; min-width: 0; }
}
/* ---------- gráficos (Início e Relatórios): grafite, laranja e cinza, como no PDF ---------- */
:root { --g-grafite: #3A3F47; --g-laranja: #FF5A00; --g-cinza: #8A919B; }
:root[data-tema="escuro"] { --g-grafite: #D9DCE1; --g-laranja: #FF7A33; --g-cinza: #6B727C; }
.g-grafite { --g: var(--g-grafite); }
.g-laranja { --g: var(--g-laranja); }
.g-cinza { --g: var(--g-cinza); }
.graficos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr); }
@media (max-width: 1200px) { .graficos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .graficos > :last-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .graficos { grid-template-columns: minmax(0, 1fr); } }
.graficos > .cartao { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cabeca-grafico { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ao-vivo { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--z-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--z-rotulo); }
.ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-texto); animation: g-pulso 2s ease-in-out infinite; }
@keyframes g-pulso { 50% { opacity: .35; } }
.g-vazio { margin: 0; padding: 28px 0; text-align: center; color: var(--z-rotulo); font-size: 13px; }
.g-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--z-texto); }
.g-legenda i, .g-rosca-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--g); flex: none; }
/* rosca */
.g-rosca { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.g-rosca-svg { width: 124px; height: 124px; flex: none; }
.g-trilho { fill: none; stroke: var(--z-caixa-interna); stroke-width: 18; }
.g-fatia { fill: none; stroke: var(--g); stroke-width: 18; transition: stroke-width .15s; }
.g-fatia:hover { stroke-width: 21; }
.g-centro-numero { font: 700 24px var(--z-fonte); fill: var(--z-titulo); }
.g-centro-texto { font: 500 10px var(--z-fonte); fill: var(--z-rotulo); }
.g-rosca-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; flex: 1 1 100px; }
.g-rosca-legenda li { display: flex; align-items: flex-start; }
.g-rosca-legenda i { margin-top: 3px; }
.g-rosca-legenda span { display: grid; min-width: 0; }
.g-rosca-legenda b { color: var(--z-titulo); font-size: 13px; }
.g-rosca-legenda b small { color: var(--z-rotulo); font-weight: 500; }
.g-rosca-legenda small { color: var(--z-rotulo); font-size: 12px; }
/* barras deitadas */
.g-barras { display: grid; gap: 8px; }
.g-linha { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 3px 4px; border-radius: 6px; }
a.g-linha:hover { background: var(--z-laranja-10); }
.g-rotulo { font-size: 13px; color: var(--z-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-trilho-barra { display: flex; gap: 2px; height: 14px; }
.g-pedaco { display: block; height: 100%; background: var(--g); min-width: 3px; transition: width .5s ease; }
.g-pedaco:first-child { border-radius: 3px 0 0 3px; }
.g-pedaco:last-child { border-radius: 0 4px 4px 0; }
.g-pedaco:only-child { border-radius: 3px 4px 4px 3px; }
.g-valor { font-size: 12.5px; color: var(--z-titulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* colunas */
.g-colunas { display: grid; gap: 10px; }
.g-colunas-area { position: relative; height: 190px; }
.g-grade { position: absolute; inset: 8px 0 22px 30px; display: flex; flex-direction: column; justify-content: space-between; }
.g-grade span { position: relative; height: 0; border-top: 1px solid var(--z-cartao-borda); }
.g-grade span:last-child { border-top-color: var(--z-barra-borda); }
.g-grade small { position: absolute; right: calc(100% + 6px); top: -7px; font-size: 10.5px; color: var(--z-rotulo); font-variant-numeric: tabular-nums; }
.g-grupos { position: absolute; inset: 8px 0 0 30px; display: flex; }
.g-grupo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 6px; }
.g-grupo:hover { background: var(--z-laranja-10); }
.g-pilares { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.g-pilar { position: relative; width: min(18px, 32%); background: var(--g); border-radius: 4px 4px 0 0; transition: height .5s ease; }
.g-pilar small { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-size: 10.5px; color: var(--z-texto); font-variant-numeric: tabular-nums; }
.g-mes { height: 22px; line-height: 22px; text-align: center; font-size: 11px; color: var(--z-rotulo); white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .g-pedaco, .g-pilar, .g-fatia { transition: none; } .ao-vivo::before { animation: none; } }
/* ---------- sem internet: o aviso no rodapé, a fila e o aviso na nota ---------- */
.fila-botao { margin-left: auto; border: 0; border-radius: 999px; padding: 2px 10px; font: 600 11px var(--z-mono); letter-spacing: .02em; cursor: pointer;
  background: var(--z-laranja); color: #FFFFFF; }
.fila-botao.com-erro { background: var(--perigo-texto); }
.instalar-botao { margin-left: auto; border: 1px solid var(--z-laranja); border-radius: 999px; padding: 1px 10px; font: 600 11px var(--z-mono);
  letter-spacing: .02em; cursor: pointer; background: transparent; color: var(--z-laranja-texto); }
.instalar-botao:hover { background: var(--z-laranja); color: #FFFFFF; }
.instalar-botao:not([hidden]) + .fila-botao { margin-left: 8px; }
.passos-ios { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fila-botao:hover { filter: brightness(1.08); }
html.sem-internet #estado-conexao { color: var(--z-laranja-texto); font-weight: 600; }
.fila-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.fila-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--z-cartao-borda); border-radius: 8px; }
.fila-lista li.recusada { border-color: var(--perigo-texto); }
.erro-texto { color: var(--perigo-texto); }
.fila-na-nota.com-erro { border-color: var(--perigo-texto); }
html.sem-internet .ao-vivo { display: none; }

/* "Nova ocorrência" no menu: o atalho maior, logo abaixo do Início (pedido do Pedro). Contorno laranja; cheio ao passar
   o mouse e na tela da nota nova. */
#menu a.menu-nova { margin: 6px 0 8px; padding: 11px 12px; border: 1.5px solid var(--z-laranja); color: #FFFFFF; font: 600 14.5px/18px var(--z-fonte);
  background: rgba(255, 90, 0, .14); }
#menu a.menu-nova svg.i { color: var(--z-laranja); width: 20px; height: 20px; }
#menu a.menu-nova:hover, #menu a.menu-nova.ativo { background: var(--z-laranja); border-color: var(--z-laranja); color: #1A1A1A; box-shadow: var(--sb-ativo-sombra); }
#menu a.menu-nova:hover svg.i, #menu a.menu-nova.ativo svg.i { color: #1A1A1A; }
#menu a.menu-nova[hidden] { display: none; }
@media (max-width: 820px) { #menu a.menu-nova { margin: 0; padding: 6px 12px; } }
@media (min-width: 821px) and (max-height: 780px) { #menu a.menu-nova { margin: 4px 0 6px; padding-top: 8px; padding-bottom: 8px; } }

/* Nota nova pela foto: as páginas lidas (a nota de muitas páginas e o CT-e), cada uma com o que o servidor reconheceu */
.paginas-lidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.paginas-lidas:empty { display: none; }
.pagina-lida { position: relative; aspect-ratio: 3 / 4; border-radius: var(--z-raio-p); overflow: hidden; background: var(--z-caixa-interna); border: 1px solid var(--z-cartao-borda); }
.pagina-lida img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagina-lida .pagina-rotulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: rgba(11, 12, 14, .78); color: #FFFFFF; font: 600 11px/1.3 var(--z-fonte); }
.pagina-lida.estado-nota .pagina-rotulo { background: rgba(18, 134, 90, .9); }
.pagina-lida.estado-cte .pagina-rotulo { background: rgba(37, 99, 235, .9); }
.pagina-lida.estado-lendo .pagina-rotulo, .pagina-lida.estado-fila .pagina-rotulo { background: rgba(255, 90, 0, .92); color: #1A1A1A; }
.pagina-lida.estado-erro .pagina-rotulo, .pagina-lida.estado-outra-nota .pagina-rotulo, .pagina-lida.estado-sem-chave .pagina-rotulo { background: rgba(185, 28, 28, .9); }
.pagina-lida .tirar { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(11, 12, 14, .75); color: #FFFFFF; font: 700 15px/1 var(--z-fonte); cursor: pointer; }
.mensagem-pagina { line-height: 1.45; }
/* o produto lido na foto com a conta que não bate: a pessoa confere */
.tabela-form tr.conferir td { background: rgba(255, 90, 0, .10); }
.tabela-form tr.conferir td:first-child { box-shadow: inset 3px 0 0 var(--z-laranja); }
.tabela-form tr.marcado-pela-foto td { background: rgba(239, 68, 68, .08); }
/* DANFE e CT-e nas listas */
.botoes-documentos { gap: 4px; flex-wrap: nowrap; }
.botoes-documentos .botao { padding: 3px 8px; }
.botoes-documentos.so-estreito { display: none; }
@media (max-width: 820px) {
  .botoes-documentos.so-estreito { display: flex; margin-top: 6px; }
  .tabela th.so-largo, .tabela td.so-largo { display: none; }
}