:root {
  --fundo: #f6f7f9;
  --cartao: #ffffff;
  --texto: #1f2937;
  --suave: #6b7280;
  --borda: #e5e7eb;
  --linha-alt: #f9fafb;
  /* Cores da marca: o app troca estas variáveis conforme a empresa escolhida. */
  /* Padrão Bizu (dono, 2026-11-06): verde e laranja da logo. */
  --primaria: #015a4d;
  --primaria-escura: #01463c;
  --primaria-clara: #cce0dc;
  --primaria-suave: #e6efed;
  --primaria-fundo: #f2f7f5;
  --destaque: #f15321;
  --soma: #15803d;
  --desconta: #b91c1c;
  --info: #475569;
  --alerta: #fef3c7;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.carregando { padding: 40px; text-align: center; color: var(--suave); }

/* Botões e campos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--cartao); cursor: pointer;
  font-weight: 600; white-space: nowrap;
}
.btn:hover { background: var(--linha-alt); }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn.primario:hover { background: var(--primaria-escura); }
.btn.perigo { color: var(--desconta); }
.btn.pequeno { min-height: 40px; padding: 0 10px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
label.campo { display: block; margin-bottom: 14px; }
label.campo > span { display: block; font-weight: 600; margin-bottom: 4px; }
label.campo small { color: var(--suave); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 8px 12px; border-radius: var(--raio);
  border: 1px solid #cbd5e1; background: #fff;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 3px solid var(--primaria-clara); border-color: var(--primaria); }
select:disabled, input:disabled, textarea:disabled { background: var(--linha-alt); color: var(--texto); opacity: 1; }

/* Login */
.login { max-width: 380px; margin: 8vh auto; padding: 28px; background: var(--cartao); border-radius: 16px; box-shadow: var(--sombra); }
.login h1 { margin: 0 0 4px; color: var(--primaria); }
.login { border-top: 5px solid var(--destaque); }
.logos-login { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.logos-login img { height: 56px; max-width: 150px; object-fit: contain; }
.login p { color: var(--suave); margin: 0 0 20px; }
.login .btn { width: 100%; margin-top: 6px; }
.form-empresa-pedida { margin: 0 0 16px; text-align: left; }
.form-empresa-pedida p { margin: 0 0 10px; color: var(--texto); }
.empresa-pedida { display: block; color: var(--texto); }
.login .troca { text-align: center; margin-top: 14px; }
.linkbtn { background: none; border: 0; color: var(--primaria); font-weight: 600; cursor: pointer; padding: 4px; text-decoration: underline; }
.ou { display: flex; align-items: center; gap: 10px; color: var(--suave); margin: 14px 0 8px; font-size: 14px; }
.ou::before, .ou::after { content: ""; flex: 1; border-top: 1px solid var(--borda); }
.btn-google { gap: 10px; }
.dica { background: var(--alerta); border-radius: var(--raio); padding: 10px 12px; font-size: 14px; margin-top: 16px; }
.erro { color: var(--desconta); font-weight: 600; min-height: 1.2em; }
.lista-logins { margin: 8px 0; padding-left: 20px; line-height: 1.6; }

/* Topo */
/* Topo e abas andam juntos e nunca saem da tela: no celular a pessoa calcula, rola
   para ver o resultado, e precisa continuar enxergando em que aba está. */
.cabecalho { position: sticky; top: 0; z-index: 20; background: var(--cartao); }
.topo {
  background: var(--cartao); color: var(--texto);
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap;
  border-bottom: 4px solid var(--destaque); box-shadow: var(--sombra);
}
.topo .marca { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.topo .marca img { height: 44px; max-width: 170px; object-fit: contain; }
.topo .marca .nome-app { font-weight: 800; font-size: 18px; color: var(--primaria); white-space: nowrap; }
.topo .marca .nome-app small { display: block; font-size: 12px; font-weight: 600; color: var(--suave); }
.topo .usuario { font-size: 14px; color: var(--suave); }
.topo .btn { min-height: 38px; background: var(--primaria); color: #fff; border-color: var(--primaria); }
.topo .btn:hover { background: var(--primaria-escura); }
.abas { display: flex; gap: 4px; padding: 4px 16px 0; background: var(--cartao); border-bottom: 1px solid var(--borda); overflow-x: auto; box-shadow: var(--sombra); }
.abas button {
  border: 0; background: none; padding: 12px 14px; font-weight: 600; color: var(--suave);
  border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;
}
.abas button.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }

/* Modo de teste (config.js sem Firebase) */
.selo-teste {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--alerta); color: #92400e; border: 1px solid #fcd34d;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}

/* Filtros e seletor de empresa */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--cartao); cursor: pointer; font-weight: 600;
}
.chip.ativa { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.chip img { height: 22px; max-width: 70px; object-fit: contain; vertical-align: middle; margin-right: 6px; background: #fff; border-radius: 4px; padding: 1px 3px; }
.chip.ativa { box-shadow: inset 0 -3px 0 var(--destaque); }
.chip[aria-disabled="true"] { opacity: .45; cursor: default; } /* filial sem dados nesta tela */
.busca { flex: 1 1 200px; max-width: 320px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.barra-empresa {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  max-width: 1400px; margin: 12px auto -4px; padding: 0 16px;
}
.empresa-unica { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: var(--primaria-escura); }
.empresa-unica img { height: 28px; max-width: 90px; object-fit: contain; background: #fff; border-radius: 4px; padding: 1px 3px; }
.selo-regime { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.regime-normal { background: #dcfce7; color: #14532d; }
.regime-simples { background: var(--alerta); color: #92400e; }

/* Resumo (quatro números com nome de gente) */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.resumo div { background: var(--cartao); border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); }
.resumo small { display: block; color: var(--suave); font-size: 13px; }
.resumo strong { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Tabelas */
.planilha-caixa { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow: auto; max-height: calc(100vh - 260px); }
table.planilha { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; }
.planilha th, .planilha td { padding: 10px 12px; border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); white-space: nowrap; }
.planilha thead th { position: sticky; top: 0; z-index: 3; background: var(--primaria-suave); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; text-align: right; }
.planilha th:first-child, .planilha td:first-child { position: sticky; left: 0; z-index: 2; background: inherit; text-align: left; min-width: 190px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* A 1ª coluna e o topo/rodapé ficam presos na rolagem: precisam de fundo opaco. */
.planilha thead th:first-child { z-index: 5; background: var(--primaria-suave); }
.planilha tbody tr { background: var(--cartao); }
.planilha tbody tr:nth-child(even) { background: var(--linha-alt); }
.planilha td.num { text-align: right; font-variant-numeric: tabular-nums; }
.planilha tfoot td { position: sticky; bottom: 0; background: var(--primaria-suave); font-weight: 800; z-index: 2; }
.planilha tfoot td:first-child { z-index: 5; background: var(--primaria-suave); }
.etiqueta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fee2e2; color: var(--desconta); vertical-align: middle; }
.th-soma { color: var(--soma); }
.th-desconta { color: var(--desconta); }
.th-info { color: var(--info); }
.vazio-lista { padding: 30px; text-align: center; color: var(--suave); }

/* Listas simples */
.lista { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); }
.lista .item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.lista .item:last-child { border-bottom: 0; }
.lista .item .principal { flex: 1 1 200px; min-width: 0; }
.lista .item small { color: var(--suave); display: block; }
.titulo-secao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.titulo-secao h2 { margin: 0; margin-right: auto; font-size: 22px; }
.caixa-texto { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px; }
.texto-suave { color: var(--suave); margin-top: 0; }
.alerta-texto { background: var(--alerta); padding: 6px 8px; border-radius: 8px; color: var(--texto) !important; }

/* Telas que ainda vão chegar */
.em-construcao { border-left: 5px solid var(--destaque); }
.construcao-selo { margin: 0 0 10px; font-weight: 800; font-size: 19px; color: var(--destaque); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.janela { background: var(--cartao); border-radius: 16px; width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.janela header { padding: 16px 20px 10px; border-bottom: 1px solid var(--borda); }
.janela header h3 { margin: 0; font-size: 21px; }
.janela header p { margin: 2px 0 0; color: var(--suave); }
.janela .corpo { padding: 16px 20px; overflow-y: auto; }
.janela footer { padding: 12px 20px; border-top: 1px solid var(--borda); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.valor-linha { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.valor-linha label { font-weight: 600; }
.valor-linha input { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
.total-restante { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; padding: 14px; border-radius: var(--raio); background: var(--primaria-fundo); font-size: 18px; }
.total-restante strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Aviso */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #111827; color: #fff; padding: 12px 20px; border-radius: 14px; text-align: center; font-weight: 600; box-shadow: var(--sombra); width: max-content; max-width: calc(100vw - 32px); }

/* Selos e formulário de empresa */
.selo { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fef3c7; color: #92400e; vertical-align: middle; }
.selo-supremo { background: var(--primaria); color: #fff; }
.selo-funcao { background: var(--primaria-suave); color: var(--primaria-escura); margin-left: 0; margin-right: 4px; }

/* Carteira (parte 5): o estágio do cliente pelos dias sem comprar */
.selo-estagio-ativo { background: #dcfce7; color: #166534; }
.selo-estagio-atencao { background: #fef3c7; color: #92400e; }
.selo-estagio-inativo { background: #ffedd5; color: #9a3412; }
.selo-estagio-perdido { background: #e5e7eb; color: #374151; }
.tabela-estagios { width: 100%; }
.tabela-estagios caption { caption-side: top; text-align: left; padding: 8px 10px; font-size: 13px; color: var(--suave); }
.tabela-estagios td:first-child { white-space: normal; }
@media (max-width: 480px) { .tabela-estagios th, .tabela-estagios td { padding-left: 6px; padding-right: 6px; } }
.tabela-estagios td:first-child small { color: var(--suave); }
.tabela-estagios tbody tr.linha-escolhida { background: var(--primaria-fundo); }
.tabela-estagios tbody tr.linha-escolhida td:first-child a { font-weight: 800; }
.busca-carteira { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.busca-carteira input { flex: 1 1 220px; min-width: 0; }
.nome-cliente { padding: 0; font-size: 16px; font-weight: 800; text-align: left; color: var(--texto); text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 3px; }

/* Ficha do cliente (parte 6) */
.ficha-dados { border-collapse: collapse; width: 100%; margin-top: 8px; }
.ficha-dados th { text-align: left; font-weight: 600; color: var(--suave); padding: 6px 10px 6px 0; vertical-align: top; width: 1%; white-space: nowrap; }
.ficha-dados td { padding: 6px 0; overflow-wrap: anywhere; }
.ficha-dados .telefones { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ficha-dados .telefones a { color: var(--primaria); font-weight: 700; text-decoration: none; }
.tabela-ficha { width: 100%; }
.tabela-ficha td:first-child { white-space: normal; }
.tabela-ficha td small { display: block; color: var(--suave); }
.abas-ficha { margin: 12px 0; }
.selo-loja { background: var(--primaria-suave); color: var(--primaria-escura); }
.notas { display: flex; flex-direction: column; gap: 8px; }
.nota { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; }
.nota summary { cursor: pointer; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; list-style: none; }
.nota summary::-webkit-details-marker { display: none; }
.nota summary small { grid-column: 1 / -1; color: var(--suave); }
.nota[open] summary { border-bottom: 1px solid var(--borda); }
.nota .tabela-ficha { margin: 0; }
@media (max-width: 480px) { .tabela-ficha th, .tabela-ficha td { padding-left: 6px; padding-right: 6px; } }
/* Transferir e aprovar (parte 7) */
.bloco-transferir > summary { cursor: pointer; color: var(--primaria-escura); }
.bloco-transferir[open] > summary { margin-bottom: 10px; }
.bloco-transferir form { display: grid; gap: 4px; }
.form-decidir { margin-top: 10px; display: grid; gap: 4px; }
.selo-sugestao-aberta { background: #fef3c7; color: #92400e; }
.selo-sugestao-aprovada { background: #dcfce7; color: #166534; }
.selo-sugestao-recusada { background: #e5e7eb; color: #374151; }
.lista .item .telefones { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lista .item .telefones a { color: var(--primaria); font-weight: 700; text-decoration: none; padding: 4px 0; }
.opcoes-importar { border: 0; padding: 0; margin: 0 0 14px; }
.opcoes-importar legend { font-weight: 600; margin-bottom: 6px; }
.resumo-importacao { background: var(--primaria-fundo); box-shadow: none; margin: 0; }
.resumo-importacao ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.6; }
.logo-lista { width: 90px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 2px; }
.logo-lista.vazia { display: flex; align-items: center; justify-content: center; color: var(--suave); font-size: 12px; }
.cores-empresa { display: flex; gap: 16px; flex-wrap: wrap; }
.cores-empresa label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cores-empresa input[type=color] { width: 52px; height: 40px; border: 1px solid var(--borda); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.previa-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.previa-logo img { height: 60px; max-width: 200px; object-fit: contain; border: 1px solid var(--borda); border-radius: 8px; padding: 4px; background: #fff; }

/* Instalar app */
.topo .btn.btn-instalar { background: var(--cartao); color: var(--primaria); border-color: var(--primaria); }
.topo .btn.btn-instalar:hover { background: var(--primaria-fundo); }
.login .btn-instalar-login { margin-top: 12px; background: var(--primaria-fundo); color: var(--primaria); border-color: var(--primaria-clara); }
.passos-instalar { margin: 0; padding-left: 22px; line-height: 1.6; font-size: 17px; }
.passos-instalar li { margin-bottom: 10px; }
.topo .usuario.linkbtn { color: var(--primaria); text-decoration: none; font-size: 14px; }
.topo .usuario.linkbtn:hover { text-decoration: underline; }
.topo .btn[data-acao=sair] { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.topo .btn[data-acao=sair]:hover { background: var(--destaque); filter: brightness(.9); }

/* Mostrar/esconder senha */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 52px; }
.olho-senha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 40px; border: 0; background: none; cursor: pointer;
  color: var(--suave); display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.olho-senha:hover, .olho-senha[aria-pressed="true"] { color: var(--primaria); }
.olho-senha:focus-visible { outline: 3px solid var(--primaria-clara); }
.login .btn-link-email { margin-top: 8px; }

/* Usuários: colunas alinhadas entre as linhas (nome | funções e empresas | botões) */
.lista-usuarios {
  display: grid; column-gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(360px, 3fr) minmax(110px, max-content);
}
.lista-usuarios .linha-usuario { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.lista-usuarios .linha-usuario .principal { grid-column: 1; }
.lista-usuarios .ocupa { grid-column: 2 / -2; }
.lista-usuarios .botoes-usuario { grid-column: -2 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Já liberados: recolhidos, só o nome; tocar abre funções, empresas e o botão. */
.lista-usuarios .recolhida > summary { grid-column: 1 / -1; cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 8px; min-height: 40px; font-size: 16px; }
.lista-usuarios .recolhida > summary::-webkit-details-marker { display: none; }
.lista-usuarios .recolhida > summary::before { content: "▸"; color: var(--suave); width: 14px; transition: transform .15s; }
.lista-usuarios .recolhida[open] > summary::before { transform: rotate(90deg); }
.lista-usuarios .recolhida:not([open]) { padding-top: 6px; padding-bottom: 6px; }
.lista-usuarios .recolhida { display: block; }
.lista-usuarios .recolhida .corpo-usuario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 4px 0 6px 22px; }
.lista-usuarios .recolhida .corpo-usuario > small { flex-basis: 100%; }
.lista-usuarios .recolhida .ocupa { flex: 1 1 auto; }
.lista-usuarios .recolhida .botoes-usuario { width: auto; }
.acessos-usuario { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0; min-width: 0; }
.acessos-usuario fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 4px 10px 8px; margin: 0; min-width: 0; }
.acessos-usuario legend { font-size: 11px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; }
.acessos-usuario legend small { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Alvo de toque perto dos 44px do resto do app: o gestor marca várias por pessoa. */
.marcador {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 10px 12px 10px 6px; margin: 2px 2px 0 0;
  border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.marcador:hover { background: var(--primaria-fundo); }
.marcador input { width: 20px; height: 20px; accent-color: var(--primaria); flex: none; }
.marcador.travado { opacity: .45; cursor: default; }

/* Aviso de pessoas aguardando liberação */
.contador { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; background: var(--destaque); color: #fff; font-size: 13px; font-weight: 800; }
.faixa-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1400px; margin: 12px auto 0; padding: 10px 16px; background: var(--alerta);
  border-left: 5px solid var(--destaque); border-radius: var(--raio); font-size: 16px; }

/* Celular */
@media (max-width: 900px) {
  .lista-usuarios { display: block; }
  .lista-usuarios .linha-usuario { display: flex; flex-wrap: wrap; }
  .lista-usuarios .botoes-usuario { justify-content: flex-start; width: 100%; }
}

@media (max-width: 640px) {
  main { padding: 12px; }
  .topo .usuario { display: none; }
  .busca { max-width: none; }
  .acoes { margin-left: 0; width: 100%; }
  .acoes .btn { flex: 1; }
  .planilha-caixa { max-height: calc(100vh - 220px); }
  .planilha th, .planilha td { padding: 9px 8px; font-size: 14px; }
  .planilha th:first-child, .planilha td:first-child { min-width: 130px; max-width: 150px; }
  .modal { padding: 0; align-items: stretch; }
  .janela { max-width: none; max-height: none; border-radius: 0; }
  .valor-linha { grid-template-columns: 1fr 130px; }
  .grade2 { grid-template-columns: 1fr; }
  .resumo { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .resumo div { flex: 0 0 auto; min-width: 140px; padding: 8px 12px; }
  .resumo strong { font-size: 17px; }
  .faixa-aviso { margin: 10px 12px 0; }
  .barra-empresa { margin: 10px 12px -2px; padding: 0; }
  .empresa-unica { font-size: 16px; }
  .topo .btn.btn-instalar span { display: none; }
}

/* Topo compacto no celular: uma linha só */
@media (max-width: 640px) {
  .topo { gap: 6px; padding: 6px 10px; flex-wrap: nowrap; }
  .topo .marca .nome-app { display: none; }
  /* Sem logo, o nome é a única identificação: fica, compacto — e o emoji sai para
     sobrar largura, porque é ele que estava cortando o nome. */
  .topo .marca.sem-logo .emoji-marca { display: none; }
  .topo .marca.sem-logo .nome-app { display: block; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topo .marca.sem-logo .nome-app small { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .topo .marca img { height: 32px; max-width: 110px; min-width: 0; }
  .topo .btn { min-height: 40px; padding: 0 10px; }
  .topo button.usuario.linkbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
    max-width: none; font-size: 22px; border: 1px solid var(--borda); border-radius: var(--raio); text-decoration: none; }
  .topo .nome-usuario { display: none; }
  .topo .selo-teste { font-size: 10px; padding: 2px 6px; letter-spacing: 0; }
  .palavra-longa { display: none; }
}

/* ---------- Configurações do gestor: duas perguntas lado a lado ---------- */
.perguntas-config {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px;
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 16px 4px; margin-bottom: 14px;
}
.perguntas-config label.campo > span { font-size: 17px; }
.perguntas-config input { max-width: 180px; font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.titulo-referencia { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.titulo-referencia b { color: var(--primaria-escura); }

/* "Ver as alíquotas da lei" e a ordem da fórmula: recolhidos, porque o gestor não
   precisa deles para responder as duas perguntas. */
.recolhido {
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: 14px; overflow: hidden;
}
.recolhido > summary {
  padding: 14px 16px; font-weight: 700; cursor: pointer; color: var(--primaria-escura);
  min-height: 44px; display: flex; align-items: center;
}
.recolhido > summary:hover { background: var(--primaria-fundo); }
.corpo-recolhido { padding: 0 16px 16px; border-top: 1px solid var(--borda); }
.corpo-recolhido > p:first-child { margin-top: 12px; }
/* Configurações em tópicos: o cartão de dentro perde a moldura (o tópico já é o cartão) e
   o título dele some, porque já está no resumo que se toca para abrir. */
.dica-topicos { margin: 0 0 10px; }
.etiqueta-bloqueado { background: #fee2e2; color: var(--desconta); }
.arquivo-bloqueados { margin-top: 14px; }
.topico-config > summary { gap: 8px; flex-wrap: wrap; }
.resumo-topico { font-weight: 400; color: var(--suave); }
.topico-config .corpo-recolhido > .caixa-texto,
.topico-config .corpo-recolhido > .perguntas-config {
  box-shadow: none; background: none; padding-left: 0; padding-right: 0; margin-bottom: 0;
}
.topico-config .corpo-recolhido > .caixa-texto > h3,
.topico-config .corpo-recolhido > .caixa-texto > .titulo-secao > h3 { display: none; }
.grade-aliquotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.grade-aliquotas input { max-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Calcular preço ---------- */
.perguntas-calculo .campo-nota input { max-width: 220px; font-size: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.perguntas-calculo .campo-frete { margin-top: 10px; }
.perguntas-calculo .campo-frete input { max-width: 180px; text-align: right; font-variant-numeric: tabular-nums; }
.perguntas-calculo fieldset.opcoes-importar { margin-top: 6px; }
.perguntas-calculo legend { font-weight: 700; }
/* Chip de duas linhas: o rótulo e, embaixo, o detalhe que tira a dúvida. */
.chip-alto { border-radius: var(--raio); padding: 8px 14px; text-align: left; line-height: 1.25; }
.chip-alto small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.marcador-st { border: 1px solid var(--borda); margin-top: 10px; }
/* A margem é digitada a cada cálculo: fica separada por uma linha, como a última
   pergunta antes do resultado. */
.perguntas-calculo .campo-margem { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--borda); }
.perguntas-calculo .campo-margem input { max-width: 180px; text-align: right; font-variant-numeric: tabular-nums; }
/* O p usado nesta peça, ao lado do número arredondado de sempre: é por ele que o
   Adilson reconhece a conta como a dele. */
.comparar-escada { margin: 0 0 12px; padding: 10px 14px; background: var(--primaria-fundo); border-radius: var(--raio); }
.comparar-escada b { color: var(--primaria-escura); }
.planilha td small { display: block; font-weight: 400; font-size: 12px; }
/* Os quatro percentuais da Etapa 1: campo estreito, alinhado à direita, com o % ao lado. */
.tabela-percentuais .campo-percentual { width: 108px; }
.tabela-percentuais input { min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.abaixo-do-piso { display: block; margin-top: 4px; color: var(--desconta); font-weight: 600; white-space: normal; }
/* Só as tabelas do gestor quebram linha: as outras dependem do nowrap para rolar. */
.tabela-percentuais td, #resultado-config .planilha td { white-space: normal; }

/* R$ e % colados ao campo, para não confundir um número com o outro */
.campo-com-sinal { position: relative; display: block; }
.campo-com-sinal input { padding-left: 44px; }
.campo-com-sinal.sufixo input { padding-left: 12px; padding-right: 36px; }
.campo-com-sinal .sinal {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--suave); font-weight: 700; pointer-events: none; font-size: 15px;
}
.campo-com-sinal .sinal-prefixo { left: 12px; }
.campo-com-sinal .sinal-sufixo { right: 12px; }

/* Os quatro percentuais têm de caber num celular de 390 px: coluna do nome mais
   estreita, células mais justas e campo curto — é número de dois dígitos. */
@media (max-width: 640px) {
  .tabela-percentuais th, .tabela-percentuais td { padding: 8px 6px; font-size: 14px; }
  .tabela-percentuais th:first-child, .tabela-percentuais td:first-child { min-width: 104px; max-width: 128px; }
  .tabela-percentuais .campo-percentual { width: 84px; }
  .tabela-percentuais.planilha input { padding: 6px 8px; }
  .tabela-percentuais .campo-com-sinal.sufixo input { padding-right: 26px; }
  .tabela-percentuais .sinal-sufixo { right: 8px; font-size: 13px; }
}

/* Os quatro números. No celular ficam 2 × 2: têm de caber a 390 px sem rolagem. */
.resumo-calculo { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.resumo-calculo .numero-forte { border-left: 4px solid var(--primaria); }
.resumo-calculo .numero-forte strong { color: var(--primaria-escura); }
.resumo-calculo strong { display: block; margin: 2px 0; }

/* Selo de ST: produto sem crédito e sem débito — para ninguém achar que houve erro. */
.selo-st { background: var(--destaque); color: #fff; margin-left: 0; }
.faixa-st {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px;
  background: var(--alerta); border-left: 5px solid var(--destaque); border-radius: var(--raio);
}
.aviso-falta { border-left: 5px solid var(--destaque); }
.aviso-falta .erro { margin: 0 0 6px; font-size: 17px; }

/* "Ver fórmula": a conta com os números daquela peça */
.painel-formula { margin-top: 12px; }
.caixa-pis-item { margin-top: 12px; }
.caixa-pis-item h3 { margin-top: 0; }
.caixa-pis-item p { margin: 6px 0; }
.painel-formula h3 { margin: 0 0 10px; font-size: 18px; }
.passos-formula { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos-formula li {
  display: grid; grid-template-columns: 1fr max-content; gap: 0 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed var(--borda);
}
.passos-formula li:last-child { border-bottom: 0; }
.passo-rotulo { font-weight: 600; }
.passo-conta { grid-column: 1; color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.passo-valor { grid-row: 1 / span 2; grid-column: 2; font-size: 19px; font-variant-numeric: tabular-nums; }
.passos-formula .passo-forte { background: var(--primaria-fundo); border-radius: 8px; padding: 10px 12px; }
.passos-formula .passo-forte .passo-valor { color: var(--primaria-escura); font-size: 22px; font-weight: 800; }
.passos-formula .passo-suave .passo-rotulo, .passos-formula .passo-suave .passo-valor { color: var(--suave); }

@media (max-width: 640px) {
  /* A regra geral de `.resumo` vira faixa rolável; aqui não: os quatro números do
     vendedor têm de aparecer juntos, sem rolagem horizontal, num celular de 390 px. */
  .resumo.resumo-calculo { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: 8px; }
  .resumo.resumo-calculo div { min-width: 0; flex: initial; padding: 10px 12px; }
  .resumo.resumo-calculo strong { font-size: 19px; }
  .resumo.resumo-calculo small { font-size: 12px; }
  .perguntas-calculo .campo-nota input { max-width: none; }
  .perguntas-config input { max-width: none; }
  .chip-alto { width: 100%; }
  .passos-formula li { grid-template-columns: 1fr; }
  .passo-valor { grid-row: auto; grid-column: 1; }
}

/* Convite */
.passos-convite { margin: 6px 0 0; padding-left: 22px; line-height: 1.7; font-size: 16px; }
.passos-convite li { margin-bottom: 6px; }
#link-convite { font-size: 15px; background: var(--linha-alt); }

/* "Ver como": o Master confere o app com os olhos de outra função. Só visual. */
.ver-como-topo { display: inline-flex; align-items: center; gap: 6px; }
.ver-como-topo select { min-height: 38px; width: auto; max-width: 170px; padding: 4px 8px; font-size: 14px; }
.faixa-ver-como { background: var(--primaria-suave); border-left-color: var(--primaria); }
@media (max-width: 640px) {
  .ver-como-topo span { display: none; }
  .ver-como-topo select { max-width: 120px; font-size: 13px; min-height: 34px; }
}

/* ---------- Consulta automática: CNPJ, NCM e CST ---------- */
.dados-da-nota .texto-suave { margin: 0 0 6px; font-size: 14px; }
.grade-dados-nota { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 0 12px; }
.grade-dados-nota input { font-variant-numeric: tabular-nums; }
.lista-deducao { list-style: none; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--fundo, transparent); display: grid; gap: 8px; font-size: 15px; }
.lista-deducao li small { display: block; }
.lista-deducao .btn { margin-left: 6px; }
.tabela-cst td:nth-child(2), .tabela-ncm td:nth-child(2) { white-space: normal; }
.tabela-cst td small { display: block; }
.tabela-cst .marcador { margin: 0; padding: 4px 8px; }
.grade-novo-ncm { display: grid; grid-template-columns: 1fr 2fr auto; gap: 0 12px; align-items: end; margin-top: 12px; }
.grade-novo-ncm .btn { margin-bottom: 14px; }
/* Importação (regras, seção 13): câmbio e frete lado a lado; a tabela de custo por peça. */
.grade-importacao { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.tabela-importacao td small, .tabela-dividida td small { display: block; }
.tabela-importacao .texto-quebra { white-space: normal; min-width: 160px; }
#cfg-imp-aliquotas { width: 100%; font: 14px/1.5 ui-monospace, Menlo, monospace; }
.btn-arquivo { position: relative; }
.lista-erros { margin: 6px 0 10px; padding-left: 20px; font-size: 14px; }
@media (max-width: 640px) {
  .grade-dados-nota, .grade-novo-ncm, .grade-importacao { grid-template-columns: 1fr; }
  .grade-novo-ncm .btn { margin-bottom: 0; }
}

/* ---------- Destino da compra e compra dividida ---------- */
.marcador-dividir { border: 1px solid var(--borda); margin-top: 10px; white-space: normal; border-radius: var(--raio);
  align-items: flex-start; }
.marcador-dividir small { display: block; color: var(--suave); font-weight: 400; }
.compra-dividida .grupo-botoes { margin-bottom: 8px; }
.tabela-dividida td:first-child { white-space: normal; }
.tabela-dividida td small { display: block; }
.tabela-dividida .linha-total td { border-top: 2px solid var(--borda); font-weight: 700; }
.nota-sem-origem { margin: 10px 0 0; }
.grade-simples { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
/* O % mora dentro do campo: quando o campo é estreito, a caixa em volta dele também é. */
.perguntas-calculo .campo-margem .campo-com-sinal, .perguntas-calculo .campo-frete .campo-com-sinal { max-width: 180px; }
.grade-aliquotas .campo-com-sinal { max-width: 130px; }
.tabela-cst th { white-space: normal; }
.tabela-cst th, .tabela-cst td { padding: 8px; }
.divisao-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.divisao-resumo small { display: block; color: var(--suave); }
.divisao-resumo strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }

/* ---------- Lançar XML ---------- */
.cabeca-nota p { margin: 0 0 6px; }
.cabeca-nota small { display: block; }
.conferencia.confere { border-left: 4px solid #2e7d32; }
.conferencia.nao-confere { border-left: 4px solid var(--desconta); }
.lista-itens-xml { display: grid; gap: 8px; margin-bottom: 12px; }
.item-xml { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
.item-xml summary { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; cursor: pointer; align-items: center; }
.item-xml-nome small { display: block; }
.item-xml-custo { text-align: right; }
.item-xml-custo small { display: block; color: var(--suave); font-size: 12px; }
.item-xml-custo strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.corpo-item-xml { padding: 0 14px 12px; }
.corpo-item-xml .planilha td:first-child { white-space: normal; }

/* Celular: a lista que abre ao tocar. Computador: a tabela com tudo em colunas. */
.tabela-xml-pc { display: none; margin-bottom: 12px; }
.tabela-xml .texto-quebra { white-space: normal; min-width: 180px; }
.tabela-xml small { display: block; }
.tabela-xml .destaque-coluna { background: var(--primaria-fundo); }
.tabela-xml tfoot td { border-top: 2px solid var(--borda); }
@media (min-width: 901px) {
  .tabela-xml-pc { display: block; }
  .lista-itens-xml { display: none; }
}
.tabela-xml { font-size: 13px; }
.tabela-xml th, .tabela-xml td { padding: 7px 8px; }
.tabela-xml th.texto { text-align: left; }
.tabela-xml .texto-quebra { min-width: 150px; max-width: 260px; }
.tabela-xml th:first-child, .tabela-xml td:first-child { min-width: 0; }
.tabela-xml thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }

/* ---------- Cotações ---------- */
.lista-fornecedores { display: grid; gap: 12px; }
.fornecedor-cotacao { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.fornecedor-cabeca small { display: block; }
.fornecedor-cotacao .grade-dados-nota { grid-template-columns: minmax(0, 260px) auto; align-items: end; margin-top: 8px; }
.fornecedor-cotacao .grade-fornecedor > .campo:first-child { grid-column: 1 / -1; }
.fornecedor-cotacao .grade-fornecedor > .campo:first-child small { display: block; }
.fornecedor-cotacao .marcador { margin-bottom: 14px; }
.receita-fornecedor { margin: 0 0 8px; font-size: 14px; }
.fornecedor-cotacao .chip small { display: block; font-weight: 400; font-size: 11px; }
.lista-pecas-origem { display: grid; gap: 6px; margin-top: 10px; max-height: 420px; overflow: auto; }
.peca-origem { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.peca-origem small { display: block; }
.linha-armadilha td { background: #fff7e6 !important; }
details.linha-armadilha { border-color: #f0b44c; }
.tabela-cotacao td small { display: block; }
.perguntas-calculo > .campo-margem:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* XML e Cotações: o campo da margem geral e, ao lado, a escolha entre a geral e uma por
   produto. O campo de cada produto vai dentro da tabela, ao lado do custo. */
.bloco-margem { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.bloco-margem > .campo { margin: 0; flex: 1 1 280px; }
.bloco-margem > p { flex-basis: 100%; margin: 0; }
.campo-margem-item { display: inline-block; width: 92px; }
.campo-com-sinal.campo-margem-item input { text-align: right; padding: 6px 26px 6px 8px; font-variant-numeric: tabular-nums; }
.campo-com-sinal.campo-margem-item .sinal-sufixo { right: 8px; }
.margem-do-item { margin: 4px 0 10px; }
/* "Por que 7,32%?": a Etapa 1 explicada, com a linha desta compra em destaque. */
.por-que-percentual .planilha { margin: 6px 0 10px; }
.por-que-percentual .planilha td:first-child { white-space: normal; }
.tabela-por-que .destaque-linha td { background: var(--primaria-fundo); font-weight: 700; }
/* Lançar XML e Cotações: procurar o produto e ordenar pelo código ou pela descrição. */
.busca-itens { max-width: 520px; margin: 0 0 12px; }
.aviso-busca { margin: 0 0 10px; }
.th-ordenar { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.th-ordenar span { opacity: .6; }
.th-ordenar:hover span, [aria-sort="ascending"] .th-ordenar span, [aria-sort="descending"] .th-ordenar span { opacity: 1; }
.margem-do-item .campo-margem-item { width: 130px; }
.caixa-ncm-cotacao { margin-bottom: 12px; }
.campo-ncm-peca { max-width: 150px; font-variant-numeric: tabular-nums; }
.campo-ncm-certo input { max-width: 150px; font-variant-numeric: tabular-nums; }
.campo-preco-avulsa { max-width: 160px; }
.linhas-avulsa { display: grid; gap: 8px; }
.linha-avulsa { display: grid; grid-template-columns: 1fr 2fr 70px 130px; gap: 8px; }
@media (max-width: 640px) { .linha-avulsa { grid-template-columns: 1fr 1fr; } }
.lista-precos-avulsa .peca-origem { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-wrap: nowrap; }
.lista-precos-avulsa .campo-preco-avulsa { max-width: none; }
.campo-curto { max-width: 220px; }
.fornecedor-cotacao .chip small { display: block; }

/* ---------- Sem internet ---------- */
.faixa-internet { position: sticky; top: 0; z-index: 50; background: #fff3cd; color: #5c4400; padding: 8px 16px;
  font-size: 14px; border-bottom: 1px solid #f0d58a; text-align: center; }

/* ---------- ❓ Tutorial ---------- */
.btn-tutorial { min-height: 38px; padding: 0 12px; }
.tutorial { display: grid; gap: 16px; margin-bottom: 16px; }
.secao-tutorial { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px;
  scroll-margin-top: 140px; }
.secao-tutorial h3 { margin: 0 0 6px; font-size: 20px; }
.intro-tutorial { margin: 0 0 12px; font-size: 16px; }
.passos-tutorial { margin: 0; padding-left: 22px; display: grid; gap: 12px; font-size: 16px; line-height: 1.5; }
.passos-tutorial p { margin: 0; }
.passos-tutorial figure { margin: 10px 0 0; }
.passos-tutorial img { display: block; width: 100%; max-width: 420px; border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); background: #fff; }
.passos-tutorial figcaption { font-size: 13px; color: var(--suave); margin-top: 4px; }
.campo-ipi { display: grid; gap: 4px; }
.campo-ipi > span { font-weight: 700; }
.linha-ipi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-ipi .grupo-botoes { flex-wrap: nowrap; }
.linha-ipi .campo-com-sinal { max-width: 220px; }
.video-tutorial { margin: 0 0 16px; display: grid; gap: 6px; }
.video-tutorial figcaption { font-weight: 700; font-size: 16px; }
.video-tutorial video { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--borda); border-radius: var(--raio); }
.dicas-tutorial { margin-top: 12px; padding: 10px 12px; background: #eef6ff; border-radius: var(--raio); font-size: 15px; line-height: 1.5; }
.indice-tutorial .chip { font-size: 14px; }
.janela .tutorial .secao-tutorial { box-shadow: none; padding: 0; }
@media (max-width: 640px) { .btn-tutorial span { display: none; } }
@media (max-width: 640px) { .ver-como-topo select { max-width: 104px; } }

/* ---------- Rodapé ---------- */
.rodape { text-align: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); color: var(--suave);
  font-size: 13px; border-top: 1px solid var(--borda); margin-top: 12px; }
.rodape p { margin: 2px 0; }
.link-whatsapp { display: inline-flex; align-items: center; gap: 5px; color: #128c4a; font-weight: 700; text-decoration: none;
  padding: 4px 8px; border-radius: 999px; }
.link-whatsapp:hover { background: #e7f8ee; }
.link-whatsapp svg { color: #25d366; }

/* ---------- Fornecedor por nome ---------- */
.campo-fornecedor { position: relative; }
.campo-fornecedor .campo { margin-bottom: 4px; }
.lista-sugestoes { display: grid; gap: 4px; margin: 0 0 12px; }
.sugestao { text-align: left; border: 1px solid var(--borda); background: var(--cartao); border-radius: var(--raio);
  padding: 8px 12px; cursor: pointer; font: inherit; }
.sugestao:hover { background: var(--primaria-fundo); }
.sugestao small { display: block; color: var(--suave); }
.grade-dados-nota .campo-fornecedor { grid-column: 1 / -1; }
.botoes-do-fim { margin-top: 12px; }
.rodape p:last-child { display: flex; justify-content: center; align-items: center; gap: 2px; flex-wrap: wrap; }
.link-whatsapp { padding: 2px 6px; }

/* ---------- Cotação em planilha ---------- */
.planilha-cotacao { max-height: none; }
.tabela-cotacao-matriz { font-size: 13px; }
.tabela-cotacao-matriz th, .tabela-cotacao-matriz td { padding: 7px 8px; }
.tabela-cotacao-matriz thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.tabela-cotacao-matriz th.texto { text-align: left; }
.tabela-cotacao-matriz th:first-child, .tabela-cotacao-matriz td:first-child { min-width: 0; }
.tabela-cotacao-matriz .grupo-fornecedor { text-align: center; background: var(--primaria-suave); }
.tabela-cotacao-matriz .fim-grupo { border-right: 2px solid #b8c2cc; }
.tabela-cotacao-matriz td small { display: block; color: var(--suave); font-size: 11px; }
.tabela-cotacao-matriz td.vencedor { background: #fff1a8 !important; }
.tabela-cotacao-matriz td.vazio-cot { color: #b8c2cc; text-align: center; }
.tabela-cotacao-matriz .texto-quebra { white-space: normal; min-width: 180px; }
.legenda-cotacao { margin: 0 0 6px; }
.amostra-vencedor { background: #fff1a8; padding: 1px 6px; border-radius: 4px; color: #5c4400; }
.detalhe-oferta { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 10px; }
.detalhe-oferta.vencedor { border-color: #e8c400; background: #fffbe0; }
.detalhe-oferta summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.detalhe-oferta summary::before { content: "▸"; color: var(--suave); }
.detalhe-oferta[open] summary::before { content: "▾"; }
.detalhe-oferta summary .texto-suave { margin-left: auto; }
.detalhe-oferta p { margin: 8px 0 0; }
.detalhe-oferta h5 { margin: 12px 0 4px; }
.janela-larga { max-width: min(960px, 96vw); width: 96vw; }
.precos-avulsa { display: flex; gap: 6px; align-items: center; }
.campo-cst-avulsa { width: 70px; }
.linha-avulsa { grid-template-columns: 1fr 2fr 70px 130px 70px 90px; }
.campo-ipi-avulsa { width: 90px; }

/* Salvos neste aparelho (XML e cotações, 15 dias) */
.lista-salvos h3 { margin: 0 0 4px; }
.lista-salvos ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-salvos li { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--borda); padding: 8px 0; }
.salvo-abrir { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; color: inherit; }
.salvo-abrir small { display: block; }
.aviso-salvo { margin: -4px 0 12px; }