/* Grupo Monte Branco — estilos. A cor da empresa ativa vem de --cor-empresa. */

/* Inter (SIL Open Font License 1.1), guardada no próprio sistema. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cor-empresa: #0F5F59;
  --cor-empresa-suave: color-mix(in srgb, var(--cor-empresa) 10%, white);
  --fundo: #F3F4F6;
  --superficie: #FFFFFF;
  --borda: #E5E7EB;
  --borda-forte: #D1D5DB;
  --texto: #111827;
  --texto-2: #4B5563;
  --selecao: #F3F4F6;
  --painel-escuro: #111827;
  --perigo: #B91C1C;
  --perigo-fundo: #FEF2F2;
  --raio: 12px;
  --raio-pequeno: 8px;
  --controle: 44px;
  --faixa: 6px;
  --altura-topo: 64px;
  --largura-menu: 272px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-empresa); }

h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 2px solid var(--cor-empresa); outline-offset: 2px; }

svg.icone {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

kbd {
  font-family: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto-2);
}

/* ---------- Estrutura das telas internas ---------- */

.faixa-empresa {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--faixa);
  background: var(--cor-empresa);
  z-index: 50;
}

.pagina-interna { padding-top: var(--faixa); }

.app { display: flex; min-height: calc(100vh - var(--faixa)); }

.menu-lateral {
  width: var(--largura-menu);
  flex-shrink: 0;
  position: sticky;
  top: var(--faixa);
  height: calc(100vh - var(--faixa));
  overflow-y: auto;
  padding: 0 12px 24px;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
}

.marca {
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.campo-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--controle);
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
  color: var(--texto-2);
  font: inherit;
  cursor: pointer;
}

.campo-busca span { flex: 1; text-align: left; }
.campo-busca:hover { border-color: var(--borda-forte); }

.menu { display: flex; flex-direction: column; gap: 2px; }

.menu-secao {
  margin: 18px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--controle);
  padding: 0 12px;
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  font-weight: 500;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.menu-link::-webkit-details-marker { display: none; }
.menu-link > span:not(.selo-em-breve) { flex: 1; }
.menu-link .icone { color: var(--texto-2); }
.menu-link:hover { background: var(--selecao); }

.menu-link.atual,
.menu-tela.atual {
  background: var(--selecao);
  box-shadow: inset 3px 0 0 var(--cor-empresa);
}

.menu-link.atual .icone { color: var(--cor-empresa); }

.menu-area .seta { transition: transform .15s ease; }
.menu-area[open] > summary .seta { transform: rotate(180deg); }

.menu-telas { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }

.menu-tela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--controle);
  padding: 0 12px 0 44px;
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  text-decoration: none;
}

a.menu-tela:hover { background: var(--selecao); }
.menu-tela.atual { font-weight: 600; }
.menu-tela.em-breve { color: var(--texto-2); cursor: default; }

/* Grupo recolhido dentro de uma área (Parâmetros, em Cadastros): fechado, abre ao clicar. */
.menu-grupo-titulo { color: var(--texto-2); list-style: none; cursor: pointer; user-select: none; }
.menu-grupo-titulo::-webkit-details-marker { display: none; }
.menu-grupo-titulo:hover { background: var(--selecao); }
.menu-grupo .seta { transition: transform .15s ease; }
.menu-grupo[open] > summary .seta { transform: rotate(180deg); }
.menu-grupo-telas { padding-bottom: 0; }
.menu-grupo-telas .menu-tela { padding-left: 60px; }

.selo-em-breve {
  padding: 1px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  position: sticky;
  top: var(--faixa);
  z-index: 20;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-empresa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topo-empresa-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.topo-empresa-nome strong { color: var(--texto); font-weight: 600; }

.ponto-empresa,
.ponto-cor {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor-empresa);
}

.ponto-cor { margin-right: 10px; vertical-align: 1px; }
.topo-usuario { display: flex; align-items: center; gap: 16px; }
.topo-usuario form { margin: 0; }
.usuario-rotulo { color: var(--texto-2); white-space: nowrap; }
.usuario-rotulo strong { color: var(--texto); font-weight: 600; }
.botao-menu { display: none; }

.barra-atalhos {
  display: flex;
  gap: 4px;
  padding: 10px 24px;
  overflow-x: auto;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  scrollbar-width: thin;
}

.atalho {
  flex: 0 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 10px;
  color: var(--texto);
  text-align: center;
  text-decoration: none;
}

a.atalho:hover,
.atalho.atual { background: var(--selecao); }

.atalho-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa);
  color: #fff;
}

.atalho-nome { font-size: 12px; font-weight: 500; line-height: 1.25; }
.atalho.desativado { color: var(--texto-2); cursor: default; }
.atalho.desativado .atalho-icone { opacity: .35; }

.conteudo { width: 100%; max-width: 1280px; padding: 28px 24px 48px; }

.fundo-menu { display: none; }

/* ---------- Títulos e cartões ---------- */

.cabecalho-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.titulo-pagina { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.subtitulo-pagina { margin-top: 4px; color: var(--texto-2); }

.titulo-secao {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.secao + .secao { margin-top: 32px; }

.cartao {
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.titulo-cartao { margin-bottom: 20px; font-size: 18px; font-weight: 600; }
.titulo-bloco { font-size: 15px; font-weight: 600; }

/* minmax(0, 1fr): a coluna encolhe para caber; com "1fr" sozinho, um campo largo empurrava a janela e ela rolava para o lado. */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

/* ---------- Início ---------- */

.avisos-dia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.cartao-aviso { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.cartao-aviso-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cartao-aviso-titulo .icone { color: var(--cor-empresa); }
.cartao-aviso-valor { font-size: 32px; font-weight: 700; line-height: 1.1; }
.cartao-aviso-nota { font-size: 13px; color: var(--texto-2); }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--controle);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.botao-principal { background: var(--cor-empresa); color: #fff; }
.botao-principal:hover { filter: brightness(.92); }
.botao-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.botao-secundario:hover { background: var(--selecao); }
.botao-perigo { background: var(--perigo); color: #fff; }
.botao-perigo:hover { filter: brightness(.92); }
.botao-largo { width: 100%; }

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: var(--controle);
  height: var(--controle);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--texto-2);
  cursor: pointer;
}

.botao-icone:hover { background: var(--selecao); color: var(--texto); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.acoes-direita { justify-content: flex-end; }

/* ---------- Formulários ---------- */

.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 14px; font-weight: 500; }

.campo input,
.campo select,
.campo textarea,
.campo-inline select {
  min-height: var(--controle);
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px; /* evita zoom automático no celular */
}

.campo input:not([type="checkbox"], [type="radio"], [type="color"]), .campo select, .campo textarea { width: 100%; min-width: 0; }
.campo textarea { resize: vertical; line-height: 1.5; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.campo-inline select:focus {
  border-color: var(--cor-empresa);
  outline: 3px solid color-mix(in srgb, var(--cor-empresa) 22%, transparent);
  outline-offset: 0;
}

.campo-inline { display: flex; align-items: center; gap: 10px; margin: 0; }
.campo-inline label { font-weight: 500; color: var(--texto-2); }

/* ---------- Avisos e selos ---------- */

.avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.aviso {
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--cor-empresa) 25%, white);
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa-suave);
}

.aviso-erro { border-color: #FECACA; background: var(--perigo-fundo); color: var(--perigo); }
.aviso-na-janela { flex: none; margin: 12px 20px 0; }

.selo {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.selo-em-uso { background: var(--cor-empresa-suave); color: var(--cor-empresa); }
/* Selo do ambiente (app/ambiente.py): fora do oficial, para ninguém confundir com o sistema de verdade. */
.selo-ambiente { flex-shrink: 0; }
.selo-ambiente-testes { background: #FEF3C7; color: #92400E; }
.selo-ambiente-copia { background: #F3F4F6; color: #374151; }
.titulo-com-selo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pagina-selecao .selecao:not(.selecao-estreita) > .titulo-com-selo { justify-content: center; }

/* ---------- Diálogos ---------- */

.dialogo {
  width: calc(100% - 32px);
  max-width: 440px;
  padding: 24px;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto);
  box-shadow: 0 20px 50px rgba(17, 24, 39, .25);
}

.dialogo p { margin-bottom: 20px; color: var(--texto-2); }
dialog::backdrop { background: rgba(17, 24, 39, .45); }

/* ---------- Painel da frase (login e prévia) ---------- */

.painel-frase {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 32px;
  height: 100%;
  padding: 40px 48px;
  background: var(--painel-escuro);
  color: #fff;
}

.painel-frase-marca { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.painel-frase-citacao { align-self: center; max-width: 520px; margin: 0; }
.painel-frase-aspas { color: color-mix(in srgb, var(--cor-empresa) 55%, white); }

.painel-frase-citacao blockquote {
  margin: 16px 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.painel-frase-citacao figcaption { color: #D1D5DB; }
.painel-frase-citacao figcaption::before { content: "— "; }
.painel-frase-citacao figcaption:empty { display: none; }

/* ---------- Login ---------- */

.pagina-login { background: var(--superficie); }

.login {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
}

.login-lado-formulario { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-caixa { width: 100%; max-width: 380px; }
.login-caixa .titulo-pagina { margin-bottom: 24px; }
.login-ajuda { margin-top: 20px; font-size: 14px; color: var(--texto-2); }

/* ---------- Configurações › frase ---------- */

.previa-login { display: flex; min-height: 240px; margin-top: 16px; overflow: hidden; border-radius: var(--raio); }
.previa-login .painel-frase { flex: 1; padding: 24px; gap: 16px; }
.previa-login blockquote { font-size: 19px; }

.bloco-frases { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--borda); }

.linha-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.lista-frases { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.item-frase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
}

.item-frase.em-uso { border-color: color-mix(in srgb, var(--cor-empresa) 35%, white); }
.item-frase.vazio { color: var(--texto-2); }
.item-frase-texto small { color: var(--texto-2); font-size: 13px; }
.item-frase-acoes { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.item-frase-acoes form { margin: 0; }

/* ---------- Busca rápida (Ctrl K) ---------- */

.busca {
  width: min(600px, calc(100% - 32px));
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(17, 24, 39, .3);
}

.busca-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto-2);
}

.busca-campo input {
  flex: 1;
  min-height: 56px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 17px;
}

.busca-resultados { max-height: 50vh; margin: 0; padding: 8px; overflow-y: auto; list-style: none; }

.busca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--controle);
  padding: 0 12px;
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  text-decoration: none;
}

.busca-item small { color: var(--texto-2); font-size: 13px; }
.busca-item.em-breve { color: var(--texto-2); }
.busca-item.selecionado { background: var(--selecao); box-shadow: inset 3px 0 0 var(--cor-empresa); }
.busca-vazio { padding: 16px 12px; color: var(--texto-2); }

.busca-rodape {
  padding: 10px 16px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-2);
}

/* ---------- Páginas sem login (erro) ---------- */

.pagina-publica {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.caixa-publica {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.marca-publica { margin-bottom: 24px; font-size: 18px; font-weight: 700; text-align: center; }
.pagina-erro p { margin: 8px 0 20px; color: var(--texto-2); }

/* ---------- Empresa ativa e troca de empresa ---------- */

.marca-empresa {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa);
  color: #fff;
  font-weight: 700;
}

.marca-empresa-grande { width: 56px; height: 56px; border-radius: var(--raio); font-size: 24px; }

.empresa-ativa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.empresa-ativa:hover { filter: brightness(.94); }
.empresa-ativa .marca-empresa { background: rgba(255, 255, 255, .2); }
.empresa-ativa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.empresa-ativa-texto small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.empresa-ativa-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lista-empresas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.lista-empresas li { display: flex; align-items: center; gap: 6px; }

.lista-empresas-nome {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

.lista-empresas-nome:hover { background: var(--selecao); }
.lista-empresas-nome.atual { box-shadow: inset 3px 0 0 var(--cor-empresa); background: var(--selecao); }
.lista-empresas-nome small { margin-left: auto; color: var(--texto-2); font-weight: 500; }

/* ---------- Escolha da empresa ---------- */

.pagina-selecao { min-height: 100vh; }
.topo-simples { position: static; justify-content: space-between; }
.topo-simples .marca { height: auto; padding: 0; }
.selecao { max-width: 960px; margin: 0 auto; padding: 40px 24px; }
.selecao-estreita { max-width: 480px; }
.selecao .subtitulo-pagina { margin-bottom: 28px; }
.pagina-selecao .selecao:not(.selecao-estreita) > .titulo-pagina,
.pagina-selecao .selecao:not(.selecao-estreita) > .subtitulo-pagina { text-align: center; }

/* Cartões no meio da tela, com a logo e o nome no meio de cada um. */
.cartoes-empresa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.cartao-empresa {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 28px 24px 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 6px solid var(--cor-empresa);
  border-radius: var(--raio);
}

.cartao-empresa h2 { font-size: 20px; font-weight: 700; }

/* ---------- Listas ---------- */

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

.campo-busca-lista {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--controle);
  padding: 0 12px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  color: var(--texto-2);
}

.campo-busca-lista:focus-within { border-color: var(--cor-empresa); }
.campo-busca-lista input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; }

.filtros select {
  min-height: var(--controle);
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

.caixa-marcar { display: inline-flex; align-items: center; gap: 8px; min-height: var(--controle); color: var(--texto-2); cursor: pointer; }
.caixa-marcar input { width: 18px; height: 18px; accent-color: var(--cor-empresa); }

.quadro-tabela {
  position: relative; /* o rótulo escondido da última coluna fica preso ao quadro, sem alargar a página */
  overflow-x: auto; /* no celular, a tabela rola para o lado dentro do quadro */
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.tabela { width: 100%; border-collapse: collapse; }

.tabela th {
  padding: 0 16px;
  height: 44px;
  border-bottom: 1px solid var(--borda);
  background: #F9FAFB;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr[data-href] { cursor: pointer; }
.tabela tbody tr[data-href]:hover { background: #F9FAFB; }
.tabela tr.inativo td { color: var(--texto-2); }
.tabela .numero { font-variant-numeric: tabular-nums; }
.tabela-vazia { padding: 32px 16px !important; color: var(--texto-2); text-align: center; }

.coluna-ordem { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.coluna-ordem:hover, .coluna-ordem.atual { color: var(--texto); }
.seta-ordem.para-cima { transform: rotate(180deg); }

.link-registro { color: var(--texto); font-weight: 600; text-decoration: none; }
.link-registro:hover { color: var(--cor-empresa); text-decoration: underline; }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--texto-2);
  font-size: 14px;
}

.selo-ativa { background: #ECFDF5; color: #047857; }
.selo-em_implantacao { background: #EEF2FF; color: #4338CA; }
.selo-inativa { background: var(--fundo); color: var(--texto-2); }

/* ---------- Janela de cadastro (modal) ---------- */

.janela {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(17, 24, 39, .3);
}

.janela-larga { max-width: 1100px; }
.janela > form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }

.janela-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 24px;
  border-bottom: 1px solid var(--borda);
}

.janela-cabecalho h2 { font-size: 18px; font-weight: 600; }
.janela-corpo { padding: 24px; overflow-y: auto; }

.janela-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--borda);
  background: #F9FAFB;
  border-radius: 0 0 var(--raio) var(--raio);
}

.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.obrigatorio { color: var(--perigo); font-style: normal; }
.erro-campo { color: var(--perigo); font-size: 13px; }
.ajuda-campo { color: var(--texto-2); font-size: 13px; }
.campo.com-erro input, .campo.com-erro select { border-color: var(--perigo); }


.campo-cor { display: flex; gap: 8px; }
.campo-cor input[type="color"] { width: 52px; padding: 4px; cursor: pointer; }
.campo-cor input[type="text"] { flex: 1; min-width: 0; text-transform: uppercase; }

.botao-perigo-discreto { background: var(--superficie); border-color: #FECACA; color: var(--perigo); }
.botao-perigo-discreto:hover { background: var(--perigo-fundo); }

.aviso-rascunho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid #FDE68A;
  border-radius: var(--raio-pequeno);
  background: #FFFBEB;
  color: #92400E;
  font-size: 14px;
}

.formulario > .aviso-rascunho { margin: 0; }

/* ---------- Usuários, perfis e atalhos ---------- */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.titulo-com-estrela { display: flex; align-items: center; gap: 4px; }
.form-estrela { margin: 0; }

.botao-estrela {
  display: inline-grid;
  place-items: center;
  width: var(--controle);
  height: var(--controle);
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--texto-2);
  cursor: pointer;
}

.botao-estrela:hover { background: var(--selecao); }
.botao-estrela.marcada { color: #D97706; }
.botao-estrela.marcada svg.icone { fill: currentColor; }

.ajustar-atalhos {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 8px;
  min-height: var(--controle);
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--cor-empresa);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ajustar-atalhos:hover { text-decoration: underline; }

.dialogo-largo { max-width: 560px; }
.rodape-dialogo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.rodape-dialogo form { margin: 0; }

.editor-atalhos { display: flex; flex-direction: column; gap: 10px; }
.lista-atalhos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.item-atalho {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
}

.item-atalho-nome { flex: 1; font-weight: 500; }
.atalho-icone-pequeno { width: 28px; height: 28px; border-radius: 6px; }
.item-atalho { padding-left: 2px; touch-action: pan-y; }
/* Alça (≡): segurar e arrastar muda a posição, no mouse e no dedo. */
.alca-arrastar { color: var(--texto-2); cursor: grab; touch-action: none; }
.alca-arrastar:active { cursor: grabbing; }
.item-atalho.arrastando {
  position: relative;
  z-index: 2;
  border-color: var(--cor-empresa);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .18);
  transform: scale(1.02);
}
.arrastando-atalho, .arrastando-atalho * { cursor: grabbing !important; user-select: none; }

.adicionar-atalho { display: flex; gap: 8px; }

.adicionar-atalho select, .adicionar-atalho input {
  flex: 1;
  min-width: 0;
  min-height: var(--controle);
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

.lista-marcar { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.lista-marcar .ponto-cor { margin-right: 0; }

/* Compacta: módulo + 5 ações cabem na metade da janela, sem rolar para o lado. */
.tabela-permissoes th { padding: 0 4px; }
.tabela-permissoes th[scope="row"] { padding: 6px 8px 6px 12px; color: var(--texto); font-weight: 500; white-space: normal; min-width: 110px; }
.tabela-permissoes td { padding: 0; text-align: center; }
.tabela-permissoes th:not([scope]) { font-size: 12px; text-align: center; }
.tabela-permissoes th:first-child { text-align: left; }

.celula-permissao {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: var(--controle);
  cursor: pointer;
}

.celula-permissao input { width: 20px; height: 20px; margin: 0; accent-color: var(--cor-empresa); cursor: pointer; }
.celula-permissao input:disabled { cursor: not-allowed; }

/* Origem da permissão na tela de usuário: verde = concedida, vermelho = retirada. */
.celula-permissao.concedida { background: #ECFDF5; border-radius: 6px; }
.celula-permissao.concedida input { accent-color: #047857; }
.celula-permissao.revogada { background: var(--perigo-fundo); border-radius: 6px; }
.celula-permissao.revogada::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--perigo);
  transform: rotate(-45deg);
}

/* Grupos da grade, iguais aos do menu: o título recolhe o grupo e mostra quantas estão marcadas. */
.busca-permissao { margin-bottom: 8px; }
.tabela-permissoes .titulo-grupo-permissoes th { padding: 0; border-top: 1px solid var(--borda); background: var(--superficie); }
.titulo-grupo-permissoes button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--controle);
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.titulo-grupo-permissoes button:hover { background: var(--selecao); }
.titulo-grupo-permissoes .seta { color: var(--texto-2); transition: transform .15s ease; }
.recolhido .titulo-grupo-permissoes .seta { transform: rotate(-90deg); }
.contagem-grupo { margin-left: auto; color: var(--texto-2); font-size: 13px; font-weight: 400; }
.recolhido [data-linha-permissao] { display: none; }
.buscando .recolhido [data-linha-permissao]:not([hidden]) { display: table-row; } /* a busca mostra mesmo recolhido */

.legenda-permissoes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.legenda-permissoes > span { display: inline-flex; align-items: center; gap: 6px; }
.marca-origem { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--borda-forte); }
.marca-origem.do-perfil { background: var(--cor-empresa); border-color: var(--cor-empresa); }
.marca-origem.concedida { background: #ECFDF5; border-color: #047857; }
.marca-origem.revogada { background: var(--perigo-fundo); border-color: var(--perigo); }

.selo-bloqueado { background: var(--perigo-fundo); color: var(--perigo); }
.texto-quebra { white-space: normal !important; max-width: 420px; }
a.usuario-rotulo { text-decoration: none; }
a.usuario-rotulo:hover strong { text-decoration: underline; }

.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; min-width: 0; }
.texto-senha { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }

/* ---------- Sessão bloqueada ---------- */

.dialogo-bloqueio { max-width: 420px; }
/* Fundo desfocado: a página continua aberta, mas não fica legível (tablet compartilhado). */
.dialogo-bloqueio::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(8px); }
.bloqueio-cabecalho { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.bloqueio-cabecalho .titulo-cartao { margin-bottom: 4px; }
.bloqueio-cabecalho p { margin: 0; color: var(--texto-2); }

.bloqueio-icone {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa);
  color: #fff;
}

.pagina-bloqueada .caixa-publica { text-align: center; }

/* ---------- Lista editável (checklist) ---------- */

.lista-editavel { display: flex; flex-direction: column; gap: 10px; }

.item-lista-editavel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 2px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  touch-action: pan-y;
}

.item-lista-editavel.arrastando {
  position: relative;
  z-index: 2;
  border-color: var(--cor-empresa);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .18);
  transform: scale(1.02);
}

.item-lista-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.itens-fixos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.itens-fixos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--texto-2);
  font-size: 14px;
}

/* ---------- Locais de estoque (árvore) e janelas médias ---------- */

.janela-media { max-width: 640px; }
.no-arvore { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(var(--nivel, 0) * 28px); }
.ramo { width: 14px; height: 14px; margin-top: -8px; border-bottom: 2px solid var(--borda-forte); border-left: 2px solid var(--borda-forte); border-bottom-left-radius: 4px; }
.contagem-sublocais { font-size: 13px; }
/* Plano de contas: os números do código alinhados e o nome quebra a linha, para a lista caber sem rolar. */
.tabela-plano td { white-space: normal; }
.tabela-plano td:first-child { min-width: 220px; }
.tabela-plano td.coluna-acoes { white-space: nowrap; }
.tabela-plano .ramo { flex: none; }
@media (max-width: 1200px) { .tabela-plano .coluna-acoes .botao span { display: none; } }
@media (max-width: 700px) {
  .tabela-plano td { padding-left: 10px; padding-right: 10px; }
  .tabela-plano td:first-child { min-width: 170px; }
}
.codigo-conta { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 2px; }
.coluna-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Bloco que só aparece com um valor de outro campo (ex.: dados do banco só na conta de banco). */
[data-mostrar-se][hidden] { display: none; }
.coluna-acoes { width: 1%; text-align: right; white-space: nowrap; }
.botao-pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; }
.selo-conservacao-seco, .selo-tipo-seco { background: #FEF3C7; color: #92400E; }
.selo-conservacao-resfriado, .selo-tipo-resfriado { background: #E0F2FE; color: #075985; }
.selo-conservacao-congelado, .selo-tipo-congelado { background: #EDE9FE; color: #5B21B6; }

/* ---------- Logomarca ---------- */

.marca-empresa.com-logo { padding: 3px; overflow: hidden; border: 1px solid var(--borda); background: #fff; }
.marca-empresa.com-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.empresa-ativa .marca-empresa.com-logo { border-color: transparent; background: #fff; }
.logo-empresa .marca-empresa.com-logo { width: 88px; height: 88px; padding: 6px; }
.cartao-empresa .marca-empresa.com-logo { width: 160px; height: 96px; padding: 8px; }
.logo-empresa { display: flex; align-items: center; gap: 14px; }
.logo-empresa-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---------- Anexos ---------- */

.anexos { display: flex; flex-direction: column; gap: 10px; }
.anexos[aria-busy="true"] { opacity: .65; pointer-events: none; }
.lista-anexos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
}

.anexo-previa {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
  color: var(--texto-2);
}

.anexo-previa img { width: 100%; height: 100%; object-fit: cover; }
.anexo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexo-texto a { overflow: hidden; color: var(--texto); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.anexo-texto small { color: var(--texto-2); font-size: 12px; }
.aviso-anexos { margin: 0; color: var(--texto-2); font-size: 14px; }
.aviso-anexos.com-erro { color: var(--perigo); }

/* Campo de arquivo escondido dentro de um botão (o botão é o que aparece). */
label.botao { position: relative; }
label.botao:focus-within { outline: 2px solid var(--cor-empresa); outline-offset: 2px; }
.escondido-acessivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* "Tirar foto" só em celular e tablet (tela de toque). */
.so-toque { display: none; }
@media (pointer: coarse) { label.so-toque { display: inline-flex; } }

/* ---------- Lista em que dá para digitar (select data-pesquisavel) ---------- */

.combo { position: relative; flex: 0 1 230px; min-width: 180px; }
/* Dentro de um formulário (campos empilhados), os 230 px viravam altura: ocupa só a linha. */
.campo .combo { flex: none; min-width: 0; }

.combo-campo {
  width: 100%;
  min-height: var(--controle);
  padding: 0 36px 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--texto);
  font: inherit;
  text-overflow: ellipsis;
}

.combo-campo::placeholder { color: var(--texto); opacity: 1; }
.combo-campo:focus::placeholder { color: var(--texto-2); }

.combo-lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
  list-style: none;
}

.combo-opcao, .combo-vazio { padding: 10px 12px; border-radius: 6px; white-space: nowrap; }
.combo-opcao { cursor: pointer; }
.combo-opcao.ativa { background: var(--cor-empresa-suave); }
.combo-opcao[aria-selected="true"] { font-weight: 600; }
.combo-vazio { color: var(--texto-2); }

/* ---------- Auditoria ---------- */

.subtitulo-lista { margin: -12px 0 16px; font-size: 14px; }
.campo-data { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 14px; }

.campo-data input {
  min-height: var(--controle);
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

/* Selos das ações (cores do prompt de melhorias da auditoria). */
.selo-verde { background: #E6F4EA; color: #1E6B34; }
.selo-azul { background: #E8F0FE; color: #1E4FA3; }
.selo-vermelho { background: #FDE8E8; color: #B42318; }
.selo-cinza { background: #F3F4F6; color: #374151; }
.selo-laranja { background: #FFF4E5; color: #8A4B00; }
.alerta-sensivel { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; color: #B45309; font-size: 13px; vertical-align: middle; }

.filtros-auditoria .campo-busca-lista { flex: 1 1 300px; }
.periodos { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.chip:hover { background: var(--selecao); }
.chip-atual, .chip-atual:hover { border-color: var(--cor-empresa); background: var(--cor-empresa); color: #fff; }

.faixa-historico {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-empresa-suave);
}

.faixa-historico > span { flex: 1; }

.tabela-auditoria .grupo-dia th {
  padding: 18px 16px 8px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
}

.tabela-auditoria tbody tr:first-child.grupo-dia th { padding-top: 10px; }
.tabela-auditoria .col-hora { width: 72px; }
.tabela-auditoria .col-resumo { white-space: normal; }
.tabela-auditoria .col-resumo .selo { margin-right: 6px; }
.tabela-auditoria .col-onde { color: var(--texto-2); }

/* Histórico de um registro: linha do tempo. */
.linha-do-tempo .linha-auditoria .col-hora { position: relative; padding-left: 36px; }
.linha-do-tempo .linha-auditoria .col-hora::before { content: ""; position: absolute; top: 0; bottom: 0; left: 19px; width: 2px; background: var(--borda); }
.linha-do-tempo .linha-auditoria .col-hora::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--cor-empresa);
  border-radius: 50%;
  background: var(--superficie);
}

/* ---------- Janela de detalhe da auditoria ---------- */

.janela-auditoria { max-width: 700px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.janela-auditoria[open] { display: flex; flex-direction: column; }
.janela-auditoria::backdrop { background: rgba(17, 24, 39, .5); }
.rotulo-secao { color: #6B7280; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.texto-cinza { color: #6B7280; font-weight: 400; }
.botao-borda { border-color: var(--borda-forte); background: var(--superficie); }
.auditoria-topo-celular { display: none; }

.auditoria-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--borda);
}

.auditoria-cabecalho-texto { display: flex; flex-direction: column; gap: 10px; }
.auditoria-cabecalho h2 { color: #111827; font-size: 24px; font-weight: 700; }
.auditoria-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auditoria-acao .selo { padding: 4px 12px; font-size: 13px; }
.auditoria-tipo { color: var(--texto-2); font-size: 14px; }
.auditoria-corpo { flex: 1; overflow-y: auto; }

.ficha { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px 16px; margin: 0; padding: 20px 28px; font-size: 15px; }
.ficha-item { display: contents; }
.ficha dt { color: #6B7280; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha-compacta { gap: 8px 16px; padding: 12px 16px 14px; font-size: 14px; border-top: 1px solid var(--borda); }

.alteracoes { display: flex; flex-direction: column; gap: 10px; padding: 0 28px 20px; }
.alteracoes-titulo { display: flex; align-items: baseline; justify-content: space-between; color: #6B7280; font-size: 13px; }
.tabela-alteracoes { overflow: hidden; border: 1px solid var(--borda); border-radius: 12px; }
.alteracao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; padding: 12px 16px; font-size: 15px; }
.colunas-antes .alteracao, .colunas-depois .alteracao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alteracao + .alteracao { border-top: 1px solid var(--borda); }
.alteracao-cabecalho { padding: 10px 16px; background: #F9FAFB; color: #4B5563; font-size: 13px; font-weight: 600; }
.alteracao-campo { font-weight: 500; overflow-wrap: anywhere; }
.alteracao-antes { color: #6B7280; overflow-wrap: anywhere; }
.alteracao-antes.riscado { text-decoration: line-through; }
.alteracao-seta { display: none; color: #6B7280; }
.etiqueta { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #FFF4E5; color: #8A4B00; font-weight: 600; overflow-wrap: anywhere; }
.etiqueta-sim { background: #E6F4EA; color: #1E6B34; }

.detalhes-tecnicos { margin: 0 28px 20px; overflow: hidden; border: 1px dashed var(--borda-forte); border-radius: 10px; }
.detalhes-tecnicos[open] { border-style: solid; border-color: var(--borda); }

.detalhes-tecnicos summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  color: #4B5563;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.detalhes-tecnicos summary::-webkit-details-marker { display: none; }
.detalhes-tecnicos[open] summary { background: #F9FAFB; color: #374151; font-weight: 600; }
.detalhes-tecnicos[open] summary .texto-cinza { display: none; }
.detalhes-tecnicos summary svg { transition: transform .15s ease; }
.detalhes-tecnicos[open] summary svg { transform: rotate(90deg); }

.auditoria-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--borda);
  background: #F9FAFB;
}

.auditoria-rodape-links { display: flex; flex-wrap: wrap; gap: 10px; }
.auditoria-rodape .botao { min-height: 44px; }
.botao-desabilitado { opacity: .55; cursor: not-allowed; }

.ultima-alteracao { flex-basis: 100%; margin: 0 0 4px; font-size: 13px; color: var(--texto-2); }

/* ---------- Auditoria no celular: lista em cartões, detalhe em tela inteira ---------- */

@media (max-width: 700px) {
  .so-computador { display: none !important; }

  .tabela-auditoria thead { display: none; }
  .tabela-auditoria, .tabela-auditoria tbody, .tabela-auditoria .grupo-dia, .tabela-auditoria .grupo-dia th { display: block; }

  .tabela-auditoria .linha-auditoria {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "hora selo" "texto texto" "quem onde";
    align-items: center;
    gap: 6px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
  }

  .tabela-auditoria .linha-auditoria td { display: block; padding: 0; border: 0; }
  .tabela-auditoria .col-hora { grid-area: hora; width: auto; }
  .tabela-auditoria .linha-auditoria .col-resumo { display: contents; }
  .tabela-auditoria .col-resumo .selo { grid-area: selo; justify-self: start; }
  .tabela-auditoria .col-resumo .alerta-sensivel { grid-area: selo; justify-self: end; }
  .tabela-auditoria .texto-resumo { grid-area: texto; }
  .tabela-auditoria .col-quem { grid-area: quem; color: var(--texto-2); font-size: 13px; }
  .tabela-auditoria .col-onde { grid-area: onde; justify-self: end; font-size: 13px; }
  .linha-do-tempo .linha-auditoria .col-hora { padding-left: 22px; }
  .linha-do-tempo .linha-auditoria .col-hora::before { left: 5px; }
  .linha-do-tempo .linha-auditoria .col-hora::after { left: 0; }

  .janela-auditoria { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }

  .auditoria-topo-celular {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
    font-weight: 600;
  }

  .auditoria-cabecalho { padding: 18px 16px 4px; border-bottom: 0; }
  .auditoria-cabecalho h2 { font-size: 22px; }
  .ficha { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
  .ficha-item { display: block; grid-column: 1 / -1; }
  .ficha-item.ficha-metade { grid-column: auto; }
  .ficha dt { font-size: 12px; }
  .ficha dd { margin-top: 2px; }
  .alteracoes { padding: 0 16px 18px; }
  .tabela-alteracoes { display: flex; flex-direction: column; gap: 8px; overflow: visible; border: 0; }
  .alteracao-cabecalho { display: none !important; }

  .alteracao, .colunas-antes .alteracao, .colunas-depois .alteracao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 14px;
    border: 1px solid var(--borda) !important;
    border-radius: 12px;
  }

  .alteracao-campo { flex-basis: 100%; font-size: 14px; font-weight: 600; }
  .alteracao-seta { display: inline-flex; }
  .detalhes-tecnicos { margin: 0 16px 18px; }

  .auditoria-rodape { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 16px 20px; background: var(--superficie); }
  .auditoria-rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .auditoria-rodape-links .botao { padding: 0 8px; }
  .auditoria-rodape > .botao-principal { min-height: 48px; }
}

/* ---------- Tablet e celular ---------- */

@media (max-width: 1000px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .menu-lateral {
    position: fixed;
    left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .menu-aberto .menu-lateral { transform: none; box-shadow: 0 0 32px rgba(17, 24, 39, .2); }

  .menu-aberto .fundo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(17, 24, 39, .4);
  }

  .botao-menu { display: inline-grid; }
  .topo { gap: 8px; padding: 0 12px; }
  .barra-atalhos { padding: 8px 12px; }
  .conteudo { padding: 20px 16px 40px; }
}

@media (max-width: 800px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-painel .painel-frase { gap: 20px; padding: 28px 24px; }
  .login-painel blockquote { font-size: 20px; }
  .login-lado-formulario { align-items: flex-start; padding: 32px 24px; }
}

@media (max-width: 700px) {
  .grade-campos { grid-template-columns: 1fr; }
  .botao-trocar span, .topo-usuario .botao span { display: none; }
  .botao-trocar, .topo-usuario .botao { padding: 0 12px; }
  .cabecalho-pagina { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .usuario-rotulo { display: none; }
  .item-frase { flex-direction: column; align-items: stretch; }
  .item-frase-acoes { justify-content: flex-end; }
}

/* ---------- Produtos (etapa 1.6) ---------- */

[hidden] { display: none !important; }

/* Abas da janela de cadastro: quebram linha em vez de rolar para o lado. */
.abas { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 24px 0; border-bottom: 1px solid var(--borda); }
.aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--controle);
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--cor-empresa); border-bottom-color: var(--cor-empresa); }
.contagem-aba { padding: 0 7px; border-radius: 999px; background: var(--cor-empresa-suave); color: var(--cor-empresa); font-size: 12px; font-weight: 600; }

/* Selos dos tipos de produto (matéria-prima e produzido seguem as telas de referência de 1 de nov de 2026). */
.selo-tipo-materia_prima { background: #E8F0FE; color: #1E4FA3; }
.selo-tipo-embalagem { background: #F3F4F6; color: #374151; }
.selo-tipo-uso_consumo { background: #FEF7E0; color: #7A4F01; }
.selo-tipo-revenda { background: #FCE7F3; color: #9D174D; }
.selo-tipo-semipronto { background: #FFF4E5; color: #8A4B00; }
.selo-tipo-produzido { background: #EEEDFE; color: #3C3489; }
.selo-tipo-ativo_imobilizado { background: #E0F2F1; color: #115E59; }

.coluna-foto { width: 56px; }
.foto-miniatura { display: block; width: 40px; height: 40px; border-radius: var(--raio-pequeno); object-fit: cover; background: var(--fundo); }
.foto-vazia { display: flex; align-items: center; justify-content: center; color: #9CA3AF; background: var(--fundo); }
.lista-marcar { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 700px) {
  .abas { padding: 8px 12px 0; }
  .aba { padding: 0 10px; }
}

/* ---------- Janela de cadastro (padrão de 1 de nov de 2026; telas de referência em docs/referencias/layout-cadastro-produtos) ----------
   Grade de 6 colunas; campos e botões de 40 px no computador e 44 px em tela de toque; rótulo de 13 px acima,
   texto de 14 px, 14 px entre as linhas; ajuda no ícone ⓘ; seções com rótulo pequeno em maiúsculas. */

.janela-cadastro { max-width: 1080px; font-size: 14px; }
.janela-cadastro:focus { outline: none; }
/* A altura segue a aba mais alta: as abas ficam umas sobre as outras (as escondidas, invisíveis), então a janela
   não pula ao trocar de aba e não sobra espaço vazio embaixo (pedido do Abel na 1.7, 1 de nov de 2026). */
.janela-cadastro > form { max-height: calc(100vh - 48px); }
.cad-corpo { display: grid; align-content: start; overflow-y: auto; }
.cad-corpo > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
.cad-corpo > [role="tabpanel"][hidden] { display: block !important; visibility: hidden; } /* vence o [hidden] geral */

.janela-cadastro .botao { min-height: 40px; padding: 0 16px; font-weight: 500; }
.janela-cadastro .botao-icone { width: 36px; height: 36px; }
.janela-cadastro .campo { gap: 5px; min-width: 0; }
.janela-cadastro .campo input,
.janela-cadastro .campo select { min-height: 40px; height: 40px; padding: 0 12px; font-size: 14px; }
.janela-cadastro .campo input.texto-numero { text-align: right; font-variant-numeric: tabular-nums; }
.janela-cadastro .campo .so-leitura { background: var(--fundo); color: var(--texto-2); border-color: var(--borda); }
.janela-cadastro .combo-campo { min-height: 40px; height: 40px; font-size: 14px; }

@media (pointer: coarse) {
  .janela-cadastro .botao { min-height: 44px; }
  .janela-cadastro .botao-icone { width: 44px; height: 44px; }
  .janela-cadastro .campo input,
  .janela-cadastro .campo select,
  .janela-cadastro .combo-campo { min-height: 44px; height: 44px; font-size: 16px; }
}

.rotulo { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rotulo label { overflow: hidden; color: var(--texto-2); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.grade-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.grade-6 > * { grid-column: span 2; }
.grade-6 > .c1 { grid-column: span 1; }
.grade-6 > .c2 { grid-column: span 2; }
.grade-6 > .c3 { grid-column: span 3; }
.grade-6 > .c4 { grid-column: span 4; }
.grade-6 > .c6 { grid-column: 1 / -1; }

.cad-secao {
  margin: 16px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ⓘ: a ajuda aparece num balão (app.js, mostrarDica) ao passar o mouse, focar ou tocar. */
.dica {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: -4px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #6B7280;
  cursor: help;
}
.dica:hover, .dica:focus-visible { color: var(--texto); }
.balao-dica {
  position: fixed;
  z-index: 10;
  max-width: min(300px, calc(100vw - 24px));
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--raio-pequeno);
  background: var(--painel-escuro);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  pointer-events: none;
}

/* Cabeçalho: foto, código e nome, selos, setas da lista, menu ⋯, fechar. */
.cad-cabecalho { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; }
.cad-foto-bloco { position: relative; flex: none; }
.cad-foto {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #F9FAFB;
  color: #6B7280;
}
.cad-foto img { width: 100%; height: 100%; object-fit: cover; }
.cad-foto-trocar { cursor: pointer; }
.cad-foto-trocar:hover { border-color: var(--borda-forte); }
.cad-foto-trocar:has(input:focus-visible) { outline: 2px solid var(--cor-empresa); outline-offset: 2px; }
.cad-foto-bloco[aria-busy="true"] .cad-foto { opacity: .5; }
.cad-foto-aviso {
  position: absolute;
  top: 54px;
  left: 0;
  z-index: 2;
  width: 260px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
  color: var(--texto-2);
  font-size: 13px;
}
.cad-foto-aviso.com-erro { color: var(--perigo); }
.cad-titulo { flex: 1; min-width: 0; }
.cad-titulo h2 { overflow: hidden; margin: 0; font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cad-codigo { margin-right: 6px; color: var(--texto-2); font-weight: 500; }
.cad-selos { display: flex; gap: 6px; margin-top: 4px; }
.cad-navegar { display: flex; align-items: center; gap: 4px; padding-right: 8px; border-right: 1px solid var(--borda); }
.cad-posicao { color: var(--texto-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.botao-icone.desativado { opacity: .35; cursor: default; }
.botao-icone.desativado:hover { background: none; }
.so-celular { display: none; }

/* Menu ⋯ (Duplicar, Ver histórico, Inativar, Excluir). */
.menu-acoes { position: relative; }
.menu-acoes-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: 260px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .12), 0 2px 6px rgba(17, 24, 39, .08);
}
.menu-acoes-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-acoes-item:hover, .menu-acoes-item:focus-visible { background: var(--selecao); }
.menu-acoes-item .icone { flex: none; color: var(--texto-2); }
.menu-acoes-item small { display: block; color: var(--texto-2); font-size: 12px; }
.menu-acoes-perigo { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; color: var(--perigo); }
.menu-acoes-perigo .icone { margin-top: 2px; color: var(--perigo); }
.menu-acoes-divisor { height: 1px; margin: 6px 0; background: var(--borda); }

/* Faixa de resumo (aparece só com dados). */
.faixa-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 9px 20px;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  background: #F9FAFB;
  color: var(--texto-2);
  font-size: 13px;
}
.faixa-resumo b { color: var(--texto); font-weight: 600; }

/* Abas: a de agora sublinhada na cor da empresa; contagem em cinza. */
.cad-abas { flex-wrap: nowrap; gap: 28px; padding: 0 20px; }
.cad-cabecalho + .cad-abas { border-top: 1px solid var(--borda); }
.cad-abas .aba { flex: none; min-height: 0; padding: 12px 0 10px; border-bottom-width: 2px; }
.cad-abas .aba[aria-selected="true"] { color: var(--texto); }
.cad-abas .contagem-aba { background: var(--fundo); color: var(--texto-2); font-weight: 500; }
.aba-com-erro::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--perigo); }

.cad-corpo { flex: 1; padding: 20px; }
.janela-cadastro .campo textarea { padding: 9px 12px; font-size: 14px; }
.cad-marcar { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: 4px 28px; min-height: 40px; }
.cad-marcar .caixa-marcar { min-height: 32px; color: var(--texto); }
.caixa-com-dica { display: inline-flex; align-items: center; gap: 4px; }
.aviso-ncm { margin: -6px 0 0; color: #1E6B34; font-size: 13px; }
.aviso-ncm:empty { display: none; }
.aviso-ncm.ok::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.aviso-ncm.erro-campo { color: var(--perigo); }
.aviso-ncm.ajuda-campo { color: var(--texto-2); }
.cad-nota { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--texto-2); font-size: 13px; }
.cad-nota .icone { flex: none; }

/* Rodapé: última alteração à esquerda; Cancelar e Salvar à direita. */
.cad-rodape { flex-wrap: nowrap; gap: 10px; padding: 12px 20px; }
.cad-rodape-info { flex: 1; min-width: 0; }
.cad-rodape .ultima-alteracao { margin: 0; }

/* Aba Fornecedores: tabela com edição na própria linha. */
.conversoes { display: flex; flex-direction: column; gap: 14px; }
.conversoes > p { margin: 0; }
/* Colunas de largura fixa: a linha em edição cabe na janela, sem rolar para o lado. */
.tabela-conversoes { table-layout: fixed; }
.tabela-conversoes th:nth-child(1) { width: 20%; }
.tabela-conversoes th:nth-child(2) { width: 13%; }
.tabela-conversoes th:nth-child(3) { width: 16%; }
.tabela-conversoes th:nth-child(4) { width: 19%; }
.tabela-conversoes th:nth-child(5) { width: 10%; }
.tabela-conversoes th:nth-child(6) { width: 9%; }
.tabela-conversoes th:nth-child(7) { width: 140px; }
.tabela-conversoes th, .tabela-conversoes td { padding-left: 12px; padding-right: 12px; }
.tabela-conversoes td { overflow: hidden; vertical-align: middle; text-overflow: ellipsis; }
.tabela-conversoes th { line-height: 1.25; white-space: normal; }
.linha-editando td { overflow: visible; white-space: normal; }
.linha-editando .coluna-acoes { white-space: nowrap; }
.tabela-conversoes .conversao-fornecedor { font-weight: 500; }
.tabela-conversoes .linha-vazia td { color: var(--texto-2); text-align: center; }
.linha-editando { background: #F9FAFB; }
.linha-editando input,
.linha-editando select,
.linha-editando .combo-campo {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}
.linha-editando input, .linha-editando select { display: block; }
.linha-editando input.texto-numero { text-align: right; font-variant-numeric: tabular-nums; }
.linha-editando [data-campo="unidade_compra"] { margin-top: 6px; height: 34px; font-size: 13px; }
.quanto-vem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.quanto-vem input { display: inline-block; width: 88px; }
.botao-confirmar, .botao-confirmar:hover { background: var(--cor-empresa); color: #fff; }
.botao-excluir-linha:hover { color: var(--perigo); }
.coluna-acoes { white-space: nowrap; text-align: right; }

@media (pointer: coarse) {
  .linha-editando input, .linha-editando select, .linha-editando .combo-campo { height: 44px; font-size: 16px; }
}

/* Aba Anexos: área para arrastar e a lista em tabela. */
.anexos-tabela { display: flex; flex-direction: column; gap: 16px; }
.area-soltar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 22px;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto-2);
  transition: border-color .15s, background .15s;
}
.area-soltar.arrastando { border-color: var(--cor-empresa); background: var(--cor-empresa-suave); }
.area-soltar-texto { display: inline-flex; align-items: center; gap: 10px; }
.anexos-tabela .aviso-anexos { margin: 0; }
.anexo-nome { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto); font-weight: 500; text-decoration: none; }
.anexo-nome:hover span { text-decoration: underline; }
.anexo-nome .icone { flex: none; color: var(--texto-2); }
.anexo-pdf .icone { color: #B42318; }
.anexo-planilha .icone { color: #1E6B34; }
.anexo-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Janela de cadastro no celular: uma coluna, pares curtos lado a lado, botões fixos embaixo ---------- */
@media (max-width: 700px) {
  .janela-cadastro { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; font-size: 15px; }
  .janela-cadastro > form { height: 100dvh; max-height: none; }
  .janela-cadastro .campo input,
  .janela-cadastro .campo select,
  .janela-cadastro .combo-campo { min-height: 44px; height: 44px; font-size: 16px; }
  .janela-cadastro .botao-icone { width: 44px; height: 44px; }

  .cad-cabecalho { gap: 4px; padding: 8px 6px 8px 4px; }
  .cad-fechar { order: -2; }
  .cad-foto-bloco { order: -1; margin-right: 6px; }
  .cad-foto { width: 40px; height: 40px; }
  .cad-titulo h2 { font-size: 16px; }
  .cad-selos { margin-top: 2px; }
  .cad-navegar { display: none; }
  .so-celular { display: inline-flex; }
  .janela-cadastro .so-computador { display: none !important; }
  .menu-acoes-lista { right: -6px; }

  .faixa-resumo { flex-wrap: nowrap; overflow: hidden; padding: 8px 16px; white-space: nowrap; }
  .cad-abas { gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .cad-abas::-webkit-scrollbar { display: none; }
  .cad-corpo { display: block; padding: 16px; }
  .cad-corpo > [role="tabpanel"][hidden] { display: none !important; }

  .grade-6 { gap: 12px 10px; }
  .grade-6 > *, .grade-6 > .c1, .grade-6 > .c2, .grade-6 > .c3, .grade-6 > .c4 { grid-column: 1 / -1; }
  .grade-6 > .m2 { grid-column: span 2; }
  .grade-6 > .m3 { grid-column: span 3; }
  .grade-6 > .m4 { grid-column: span 4; }
  .grade-6 > .m6 { grid-column: 1 / -1; }
  .primeiro-no-celular { order: -1; }
  .campo-sped { order: 1; }
  .grade-6:has(> [data-peso-unidade][hidden]) > .campo-unidade,
  .grade-6:has(> [data-quantidade-venda][hidden]) > .campo-venda { grid-column: 1 / -1; }
  .cad-marcar { gap: 4px 20px; }
  .cad-secao { margin: 4px 0 12px; padding-top: 12px; }

  .cad-rodape { gap: 10px; padding: 12px 16px 20px; background: var(--superficie); border-radius: 0; }
  .cad-rodape-info { display: none; }
  .cad-rodape .botao { flex: 1; min-height: 48px; font-weight: 600; }

  /* Tabelas das abas em cartões: nada rola para o lado. */
  .tabela-conversoes thead, .tabela-anexos thead { display: none; }
  .tabela-conversoes tr, .tabela-anexos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
  .tabela-conversoes td, .tabela-anexos td { display: block; padding: 0; border: 0; }
  .tabela-conversoes .coluna-acoes, .tabela-anexos .coluna-acoes { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .tabela-conversoes td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-2); }
  .tabela-conversoes .linha-vazia td { grid-column: 1 / -1; }
  .linha-editando { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .linha-editando .coluna-acoes { grid-column: 1 !important; grid-row: auto !important; text-align: left; }
}

/* ---------- Troca de tipo do produto: dois avisos e a faixa "revise" (1 de nov de 2026) ---------- */
.aviso-troca {
  width: calc(100% - 32px);
  max-width: 520px;
  padding: 22px 24px 18px;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 14px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .3);
}
.aviso-troca h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.aviso-troca h3 {
  margin: 14px 0 6px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.aviso-troca ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; }
.aviso-troca p { margin: 0 0 8px; }
.aviso-troca footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.aviso-troca .lista-apagar li { color: var(--perigo); }
.aviso-perigo { border-top: 6px solid var(--perigo); }
.aviso-perigo-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--perigo); }
.aviso-perigo-titulo h2 { margin: 0; color: var(--perigo); }
.aviso-perigo .lista-apagar { padding: 10px 12px 10px 30px; border-radius: var(--raio-pequeno); background: var(--perigo-fundo); }

.faixa-revisao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid #FDE68A;
  border-bottom: 1px solid #FDE68A;
  background: #FEF9C3;
  color: #713F12;
  font-size: 13px;
}
.faixa-revisao > .icone { flex: none; margin-top: 1px; }
.faixa-revisao-texto { flex: 1; min-width: 0; }
.faixa-revisao ul { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.link-campo {
  padding: 0;
  border: 0;
  background: none;
  color: #713F12;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-campo:hover { color: var(--texto); }
.faixa-revisao .botao { flex: none; background: var(--superficie); }
.selo-revisar { background: #FEF9C3; color: #713F12; }

@media (max-width: 700px) {
  .faixa-revisao { flex-wrap: wrap; padding: 10px 16px; }
  .faixa-revisao .botao { width: 100%; }
  .aviso-troca footer .botao { flex: 1; }
}

/* ---------- Clientes, fornecedores e funcionários (etapa 1.7) ---------- */
.janela-cadastro-estreita { max-width: 720px; }
.janela-cadastro-media { max-width: 920px; }

/* Sem foto: a inicial do nome num quadrado cinza. */
.cad-inicial { background: #F3F4F6; color: var(--texto-2); font-size: 20px; font-weight: 600; }
.selo-bloqueado { background: var(--perigo-fundo); color: var(--perigo); }
.selo-tipo-consumidor { background: #F3F4F6; color: #374151; }
.selo-tipo-empresa { background: #E8F0FE; color: #1E4FA3; }
.selo-tipo-orgao_publico { background: #E0F2F1; color: #115E59; }
/* Plano de contas e contas financeiras (etapa 1.8) */
.selo-tipo-receita { background: #E6F4EA; color: #1E6B34; }
.selo-tipo-deducao { background: #FFF4E5; color: #8A4B00; }
.selo-tipo-custo { background: #FEF7E0; color: #7A4F01; }
.selo-tipo-despesa { background: #FCE7F3; color: #9D174D; }
.selo-tipo-financeiro { background: #E8F0FE; color: #1E4FA3; }
.selo-tipo-investimento { background: #E0F2F1; color: #115E59; }
.selo-tipo-imposto_lucro { background: #EEEDFE; color: #3C3489; }
.selo-tipo-banco { background: #E8F0FE; color: #1E4FA3; }
.selo-tipo-cofre { background: #F3F4F6; color: #374151; }
.selo-tipo-caixa { background: #FEF7E0; color: #7A4F01; }
.selo-tipo-peso { background: #E8F0FE; color: #1E4FA3; }
.selo-tipo-volume { background: #E0F2F1; color: #115E59; }
.selo-tipo-contagem { background: #F3F4F6; color: #374151; }

/* Lista: nome fantasia (ou apelido) em negrito e a razão social embaixo, em cinza. */
.tabela-pessoas .link-registro { font-weight: 600; }
.tabela-pessoas .coluna-nome small { display: block; color: var(--texto-2); font-size: 13px; }

/* CPF ou CNPJ com a lupa da consulta pública ao lado. */
.campo-com-botao { display: flex; gap: 6px; min-width: 0; }
.campo-com-botao input { flex: 1; min-width: 0; }
.janela-cadastro .botao-lupa { flex: none; width: 40px; height: 40px; border: 1px solid var(--borda-forte); }
.botao-lupa:disabled { opacity: .4; cursor: default; }
.botao-lupa:disabled:hover { background: none; }
.aviso-cnpj, .aviso-linha { color: var(--texto-2); font-size: 13px; }
.aviso-cnpj.erro-campo, .aviso-linha.erro-campo { color: var(--perigo); }
.aviso-linha { margin: -6px 0 0; }
.aviso-linha:empty { display: none; }
.botao-reativar { align-self: flex-start; margin-top: 4px; }
.cad-texto { margin: 0; color: var(--texto-2); }
.combo-criar { color: var(--cor-empresa); font-weight: 500; }
.item-lista-editavel.sem-arrastar { padding-left: 12px; }

/* Contatos e produtos do fornecedor: a mesma tabela das conversões (edição na própria linha). */
.linhas-editaveis { display: flex; flex-direction: column; gap: 14px; }
.tabela-linhas { table-layout: fixed; }
.tabela-linhas th, .tabela-linhas td { padding-left: 12px; padding-right: 12px; }
.tabela-linhas td { overflow: hidden; vertical-align: middle; text-overflow: ellipsis; }
.tabela-linhas .linha-principal { font-weight: 500; }
.tabela-linhas .linha-vazia td { color: var(--texto-2); text-align: center; }
.tabela-contatos th:nth-child(1) { width: 28%; }
.tabela-contatos th:nth-child(2) { width: 20%; }
.tabela-contatos th:nth-child(3) { width: 18%; }
.tabela-contatos th:nth-child(5) { width: 140px; }
.tabela-produtos-fornecedor th:nth-child(1) { width: 28%; }
.tabela-produtos-fornecedor a { color: var(--texto); font-weight: 500; }

@media (max-width: 700px) {
  .tabela-linhas thead { display: none; }
  .tabela-linhas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
  .tabela-linhas td { display: block; padding: 0; border: 0; }
  .tabela-linhas .coluna-acoes { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .tabela-linhas td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-2); }
  .tabela-linhas .linha-vazia td { grid-column: 1 / -1; }
  .janela-cadastro .botao-lupa { width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  .janela-cadastro .botao-lupa { width: 44px; height: 44px; }
}

/* ---------- Importação (etapa 1.9) ---------- */

.cad-saef { display: block; margin-top: 2px; color: var(--texto-2); font-size: 12px; }
.imp-passos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--texto-2); font-size: 14px; }
.imp-passos li { display: flex; align-items: center; gap: 8px; }
.imp-passos span {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.imp-passos .atual { color: var(--texto); font-weight: 600; }
.imp-passos .atual span { border-color: var(--cor-empresa); background: var(--cor-empresa); color: #fff; }
.imp-passos .feito span { border-color: var(--cor-empresa); color: var(--cor-empresa); }
.imp-abas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--borda); }
.imp-abas a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--controle); padding: 0 14px; border-bottom: 3px solid transparent; color: var(--texto-2); font-weight: 500; text-decoration: none; }
.imp-abas a:hover { color: var(--texto); }
.imp-abas a.atual { border-bottom-color: var(--cor-empresa); color: var(--cor-empresa); }
.imp-envio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.imp-envio-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; grid-column: 1 / -1; }
.imp-modelos { display: grid; gap: 10px; margin-top: 24px; }
.imp-texto { margin: 0 0 16px; color: var(--texto-2); overflow-wrap: anywhere; }
.imp-confirmar { display: grid; gap: 16px; margin-top: 20px; }
.imp-bloco { display: grid; gap: 10px; padding: 20px; }
.imp-bloco p { margin: 0; overflow-wrap: anywhere; }
.imp-pergunta { display: grid; gap: 6px; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--borda); }
.imp-pergunta legend { padding: 0 0 6px; font-weight: 500; }
.imp-progresso { width: 100%; height: 12px; accent-color: var(--cor-empresa); }
.imp-ficha { border-top: 0; padding: 0; }
.imp-ligar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borda); }
.tabela-lotes .coluna-nome, .tabela-previa .coluna-nome { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .imp-envio, .imp-ligar { grid-template-columns: minmax(0, 1fr); }
  .quadro-tabela:has(.tabela-lotes), .quadro-tabela:has(.tabela-previa) { overflow-x: auto; }
}