/* Relatorios InovaFarma: identidade do "Manual de aplicacao da marca InovaFarma".
   Cromias institucionais: azul #0087CA e cinza #5B5B5F. Tipografia: Roboto.
   O azul puro tem 3,95:1 com branco (nao passa AA em texto pequeno), entao
   botoes e links usam o mesmo azul 12% mais escuro (#0077B2, 4,9:1). O #0087CA
   fica no logo, nos detalhes graficos e nos estados selecionados. */

@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --cor-marca: #0087CA;
  --cor-marca-rgb: 0, 135, 202;
  --cor-primaria: #0077B2;
  --cor-primaria-hover: #00699E;
  --cor-cinza-marca: #5B5B5F;

  --texto: #2B2B2E;
  --texto-2: #5B5B5F;
  --texto-3: #6E6E73;
  --texto-inverso: #FFFFFF;

  --fundo: #F5F6F7;
  --superficie: #FFFFFF;
  --superficie-2: #F2F3F5;
  --superficie-3: #E8F4FB; /* azul claro: o manual permite fundos claros ate 10% da cor */
  --borda: #DCDEE2;
  --borda-forte: #C5C8CE;

  --sucesso: #1B7A3E;
  --sucesso-fundo: #E7F5EC;
  --alerta: #935200;
  --alerta-fundo: #FFF3E0;
  --perigo: #C42B36;
  --perigo-fundo: #FDECEE;
  --perigo-hover: #A8222D;

  --fonte: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  /* forma do simbolo INF: cantos superior-esquerdo e inferior-direito arredondados */
  --raio-folha: 12px 3px 12px 3px;
  --raio-folha-sm: 8px 2px 8px 2px;

  --sombra-1: 0 1px 2px rgba(43, 43, 46, .06), 0 1px 3px rgba(43, 43, 46, .04);
  --sombra-2: 0 16px 40px -12px rgba(43, 43, 46, .24);
  --anel-foco: 0 0 0 3px rgba(var(--cor-marca-rgb), .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fonte); font-weight: 700; line-height: 1.2; margin: 0; color: var(--texto); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--cor-primaria); }
.sem-rolagem { overflow: hidden; }

.icone { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.icone-sm { width: 16px; height: 16px; }
.icone-lg { width: 24px; height: 24px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--raio-md);
  font-weight: 500; font-size: 14.5px; white-space: nowrap;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primario { background: var(--cor-primaria); color: var(--texto-inverso); }
.btn-primario:hover:not(:disabled) { background: var(--cor-primaria-hover); }
.btn-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--perigo); color: var(--texto-inverso); }
.btn-perigo:hover:not(:disabled) { background: var(--perigo-hover); }
.btn-bloco { width: 100%; height: 48px; font-size: 15.5px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--raio-md);
  background: transparent; color: var(--texto-2); cursor: pointer;
}
.btn-icone:hover { background: var(--superficie-3); color: var(--cor-primaria); }
.btn-icone:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn-icone.perigo:hover { background: var(--perigo-fundo); color: var(--perigo); }

.carregando { position: relative; color: transparent !important; pointer-events: none; }
.carregando::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
  animation: girar .7s linear infinite;
}
.btn-secundario.carregando::after { border-color: var(--borda-forte); border-top-color: var(--cor-marca); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .rotulo { font-size: 13.5px; font-weight: 500; color: var(--texto-2); }
.campo .obrigatorio { color: var(--perigo); margin-left: 2px; }
.entrada {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.entrada::placeholder { color: #9A9CA3; }
.entrada:hover { border-color: #A9ACB4; }
.entrada:focus { outline: none; border-color: var(--cor-marca); box-shadow: var(--anel-foco); }
.entrada.invalida { border-color: var(--perigo); }
.entrada.invalida:focus { box-shadow: 0 0 0 3px rgba(196, 43, 54, .2); }
textarea.entrada { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; }
.dica { font-size: 12.5px; color: var(--texto-3); }
.erro-campo { font-size: 12.5px; color: var(--perigo); }

.com-acoes { position: relative; display: flex; align-items: center; }
.com-acoes .entrada { padding-right: 50px; }
.com-acoes.duas .entrada { padding-right: 88px; }
.com-acoes .acoes-campo { position: absolute; right: 5px; display: flex; gap: 2px; }
.com-acoes .btn-icone { width: 34px; height: 34px; }

.busca { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 380px; }
.busca .icone { position: absolute; left: 13px; color: var(--texto-3); pointer-events: none; }
.busca .entrada { padding-left: 40px; height: 40px; }

.marcador { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--texto); }
.marcador input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--cor-primaria); flex: none; cursor: pointer; }
.marcador small { display: block; color: var(--texto-3); font-size: 12.5px; }

/* chave liga/desliga */
.chave { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave .trilho {
  position: relative; width: 44px; height: 24px; flex: none;
  background: var(--borda-forte); border-radius: 999px; transition: background .15s;
}
.chave .trilho::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: var(--sombra-1); transition: transform .15s;
}
.chave input:checked + .trilho { background: var(--cor-primaria); }
.chave input:checked + .trilho::after { transform: translateX(20px); }
.chave input:focus-visible + .trilho { box-shadow: var(--anel-foco); }
.chave-texto strong { display: block; font-weight: 500; font-size: 14px; }
.chave-texto small { display: block; color: var(--texto-3); font-size: 12.5px; }

/* ---------- Alertas e selos ---------- */
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio-md); font-size: 14px;
}
.aviso .icone { margin-top: 1px; }
.aviso-erro { background: var(--perigo-fundo); color: var(--perigo); }
.aviso-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.aviso-info { background: var(--superficie-3); color: var(--texto-2); }
.aviso small { display: block; margin-top: 4px; color: var(--texto-2); word-break: break-word; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--raio-sm);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.selo .icone { width: 14px; height: 14px; }
.selo-ativo { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo-inativo { background: var(--superficie-2); color: var(--texto-2); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-neutro { background: var(--superficie-2); color: var(--texto-2); }

/* quarto de circulo azul no canto, como nas paginas do manual da marca */
.canto-marca {
  position: absolute; right: 0; bottom: 0; width: 96px; height: 96px;
  background: var(--cor-marca); border-top-left-radius: 100%;
  pointer-events: none;
}

/* =========================================================
   LOGIN
   ========================================================= */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-marca {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 0 56px 64px;
  background: var(--cor-primaria); color: var(--texto-inverso);
}
.login-chamada h1 { max-width: 560px; padding-right: 48px; color: var(--texto-inverso); font-size: 42px; letter-spacing: -.01em; }
/* a linha branca que sai do titulo ate' a borda, como nas capas de secao do manual */
.login-linha { height: 2px; margin: 28px 0 0; background: rgba(255, 255, 255, .9); }
.login-chamada p { max-width: 560px; margin-top: 24px; padding-right: 56px; font-size: 17px; color: var(--texto-inverso); }
.login-beneficios { list-style: none; max-width: 560px; padding: 0 56px 0 0; margin: 32px 0 0; display: grid; gap: 14px; }
.login-beneficios li { display: flex; align-items: center; gap: 12px; color: var(--texto-inverso); font-size: 15.5px; }
.login-beneficios .marca-ponto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--raio-folha-sm);
  background: var(--texto-inverso); color: var(--cor-primaria);
}

.login-area { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px 24px 120px; background: var(--superficie); }
.login-cartao { width: 100%; max-width: 400px; }
.login-logo { display: block; height: 52px; width: auto; margin-bottom: 40px; }
.login-cartao h2 { font-size: 28px; }
.login-cartao .subtitulo { margin-top: 8px; color: var(--texto-2); }
.login-form { margin-top: 28px; display: grid; gap: 18px; }
.login-form .btn-bloco { margin-top: 6px; }
.login-ajuda { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borda); font-size: 13.5px; color: var(--texto-3); }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { display: none; }
  .login-area { align-items: flex-start; padding: 40px 20px 110px; min-height: 100vh; }
  .login-logo { height: 44px; margin-bottom: 32px; }
  .canto-marca { width: 72px; height: 72px; }
}

/* =========================================================
   CASCA (topo + conteudo) das areas logadas
   ========================================================= */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 75px; padding: 0 32px;
  background: var(--superficie);
  border-top: 3px solid var(--cor-marca);
  border-bottom: 1px solid var(--borda);
}
.topo-marca { display: flex; align-items: center; gap: 20px; min-width: 0; }
/* 43px e' a reducao minima da assinatura horizontal em meio digital (manual) */
.topo-logo { height: 43px; width: auto; flex: none; }
.topo-divisor { width: 1px; height: 28px; background: var(--borda); flex: none; }
.topo-titulo { font-weight: 500; font-size: 17px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-acoes { display: flex; align-items: center; gap: 4px; }
.topo-acoes a.btn { text-decoration: none; }
.topo-usuario {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 5px; margin-right: 8px;
  border-radius: var(--raio-md); background: var(--superficie-2);
  font-size: 13.5px; font-weight: 500; color: var(--texto-2);
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--raio-folha-sm);
  background: var(--cor-marca); color: #fff; font-size: 11.5px; font-weight: 700;
}

.conteudo { max-width: 1240px; margin: 0 auto; padding: 32px 32px 64px; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecalho-pagina h1 { font-size: 28px; }
.cabecalho-pagina p { margin-top: 6px; color: var(--texto-2); }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }

/* KPI row: cada tile tambem filtra a tabela */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.indicador {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 20px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-folha);
  box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s;
}
.indicador:hover { border-color: var(--borda-forte); }
.indicador:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.indicador[aria-pressed="true"] { border-color: var(--cor-marca); box-shadow: 0 0 0 1px var(--cor-marca); }
.indicador-rotulo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto-2); font-weight: 500; }
.indicador-rotulo .icone { width: 16px; height: 16px; color: var(--texto-3); }
.indicador[aria-pressed="true"] .indicador-rotulo .icone { color: var(--cor-marca); }
.indicador-valor { font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--texto); }

.painel-lista { margin-top: 20px; overflow: hidden; }
.barra-ferramentas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.contagem { font-size: 13.5px; color: var(--texto-3); }

/* tabela */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  padding: 12px 20px; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em;
  background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 14px 20px; border-bottom: 1px solid var(--borda); vertical-align: middle; font-size: 14px; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .1s; cursor: pointer; }
.tabela tbody tr.esqueleto { cursor: default; }
.tabela tbody tr:hover { background: #F7FBFE; }
.tabela .col-acoes { width: 1%; white-space: nowrap; text-align: right; }
.cel-nome strong { display: block; font-weight: 500; font-size: 14.5px; }
.cel-nome span { display: block; color: var(--texto-3); font-size: 13px; }
.cel-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cel-banco { color: var(--texto-2); font-size: 13.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-sutil { color: var(--texto-3); font-size: 13.5px; white-space: nowrap; }
.linha-acoes { display: inline-flex; gap: 2px; }

.vazio { padding: 56px 24px; text-align: center; }
.vazio .icone-vazio {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--raio-folha);
  background: var(--superficie-3); color: var(--cor-marca);
}
.vazio h3 { margin-top: 16px; font-size: 18px; }
.vazio p { margin-top: 6px; color: var(--texto-2); }
.vazio .btn { margin-top: 20px; }

.esqueleto td { padding: 18px 20px; }
.esqueleto span {
  display: block; height: 12px; border-radius: var(--raio-sm);
  background: linear-gradient(90deg, var(--superficie-2), #FAFAFB, var(--superficie-2));
  background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =========================================================
   GAVETA (formulario lateral) e MODAIS
   ========================================================= */
.veu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(43, 43, 46, .45);
  opacity: 0; transition: opacity .2s;
}
.veu.aberto { opacity: 1; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--superficie); box-shadow: var(--sombra-2);
  border-top: 3px solid var(--cor-marca);
  transform: translateX(100%); transition: transform .22s ease;
}
.gaveta.aberta { transform: translateX(0); }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--borda); }
.gaveta-topo h2 { font-size: 20px; }
.gaveta-topo p { font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 8px 24px 32px; }
.gaveta-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--borda); background: var(--superficie); }

.secao { padding-top: 24px; }
.secao + .secao { margin-top: 8px; border-top: 1px solid var(--borda); }
.secao-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.icone-secao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--raio-folha-sm); flex: none;
  background: var(--superficie-3); color: var(--cor-marca);
}
.secao-titulo h3 { font-size: 16px; }
.secao-titulo p { font-size: 12.5px; color: var(--texto-3); }
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-porta { grid-template-columns: minmax(0, 1fr) 120px; }
.ocupa-tudo { grid-column: 1 / -1; }
.resultado-teste { margin-top: 4px; }

.modal-camada { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* fechando (o veu ainda some por 0,18 s): o clique ja' passa para a tela */
.modal-camada:not(.aberto) { pointer-events: none; }
.modal-camada .veu { z-index: 0; }
.modal {
  position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-2);
  padding: 24px;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .18s, transform .18s;
}
.modal-camada.aberto .modal { opacity: 1; transform: none; }
.modal h2 { font-size: 18px; }
.modal .modal-texto { margin-top: 8px; color: var(--texto-2); font-size: 14.5px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-acoes .btn { height: 40px; }
.modal .grade { margin-top: 18px; }

.credenciais { margin-top: 18px; display: grid; gap: 10px; padding: 16px; border-radius: var(--raio-md); background: var(--superficie-3); border: 1px solid #CDE6F4; }
.credenciais div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.credenciais dt { color: var(--texto-2); }
.credenciais dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; }

/* avisos rapidos */
.avisos-rapidos { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; gap: 10px; width: min(380px, calc(100% - 32px)); }
.aviso-rapido {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--raio-md);
  background: var(--texto); color: #fff; font-size: 14px; box-shadow: var(--sombra-2);
  animation: entrar .2s ease;
}
.aviso-rapido.sucesso .icone { color: #7DD3A0; }
.aviso-rapido.erro .icone { color: #FCA5A5; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* =========================================================
   AREA DO CLIENTE: painel de quadrados igual ao menu do InovaFarma
   (cores medidas na tela do sistema: roxo dos relatorios #6953A5,
   azul do titulo #3284BA)
   ========================================================= */
.pagina-painel { background: #FFFFFF; }
.painel-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 28px 0;
}
.painel-produto {
  display: block; font-size: 34px; font-weight: 300; line-height: 1.1;
  letter-spacing: .01em; color: #3284BA;
}
.painel-loja {
  display: block; min-height: 20px; margin-top: 6px;
  font-size: 14.5px; letter-spacing: .02em; text-transform: uppercase; color: #75767A;
}
.painel-acoes { display: flex; gap: 10px; padding-top: 4px; }
.btn-circulo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 2px solid #8A8B8F; border-radius: 50%;
  background: transparent; color: #5B5B5F; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-circulo .icone { width: 18px; height: 18px; }
.btn-circulo:hover { border-color: #3284BA; color: #3284BA; }
.btn-circulo:focus-visible { outline: none; box-shadow: var(--anel-foco); }

.painel-conteudo { padding: 30px 28px 48px; }
.grupo-titulo { font-size: 24px; font-weight: 400; color: #5B5B5F; margin-bottom: 14px; }

.ladrilhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-auto-rows: 120px;
  gap: 5px;
}
.ladrilho {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  padding: 12px 10px 8px;
  border: 0; border-radius: 0;
  background: var(--cor-ladrilho, #6953A5); color: #FFFFFF;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: transform .08s ease, background-color .12s;
}
.ladrilho-largo { grid-column: span 2; }
.ladrilho .icone { width: 54px; height: 54px; align-self: center; margin-top: 4px; }
.ladrilho-rotulo { font-size: 14.5px; line-height: 1.25; }
/* passando o mouse o quadrado fica laranja, como no menu do InovaFarma (#FE7F00 medido na tela) */
.ladrilho:hover,
.ladrilho:focus-visible { background: #FE7F00; }
.ladrilho:active { transform: scale(.97); }
.ladrilho:focus-visible { outline: 3px solid #3284BA; outline-offset: 2px; }
.ladrilho-relatorio { --cor-ladrilho: #6953A5; }
/* amarelo dos quadrados de "Manutenção" do InovaFarma (medido na tela do sistema) */
.ladrilho-importacao { --cor-ladrilho: #DCBF00; }
/* azul claro dos quadrados "Consulta de preços" / "Carteira Digital" do InovaFarma (medido na tela) */
.ladrilho-gerencial { --cor-ladrilho: #00BDE1; }
/* branco sobre amarelo ou azul claro tem pouco contraste: uma sombra leve ajuda a ler o nome */
/* IA (assistente no WhatsApp): verde claro, o laranja do passar o mouse e' o mesmo dos outros */
.ladrilho-ia { --cor-ladrilho: #72C24A; }
.ladrilho-importacao .ladrilho-rotulo,
.ladrilho-gerencial .ladrilho-rotulo,
.ladrilho-ia .ladrilho-rotulo { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ladrilho-importacao:hover .ladrilho-rotulo,
.ladrilho-importacao:focus-visible .ladrilho-rotulo,
.ladrilho-gerencial:hover .ladrilho-rotulo,
.ladrilho-gerencial:focus-visible .ladrilho-rotulo,
.ladrilho-ia:hover .ladrilho-rotulo,
.ladrilho-ia:focus-visible .ladrilho-rotulo { text-shadow: none; }

/* grupos lado a lado (Relatórios, Importação...), como no menu do InovaFarma */
.grupos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.grupo { flex: none; }

/* =========================================================
   TELA DE RELATORIO: filtro a esquerda, relatorio ao lado.
   Cores medidas nas telas do InovaFarma: botao #4681B4, faixa do
   relatorio #00A9FE, rotulos #696969, campos #B9B9B9, setas #7F7F7F.
   ========================================================= */
.pagina-relatorio { background: #FFFFFF; }
.rel-topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 20px;
  background: #FFFFFF; border-bottom: 1px solid #E3E3E3;
}
.rel-topo-esq, .rel-topo-dir { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* os botoes da direita nao encolhem; quem cede espaco e' o titulo (com reticencias) */
.rel-topo-dir { flex: none; }
.rel-inicio {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; color: #8C8C8C; border-radius: var(--raio-sm);
}
.rel-inicio .icone { width: 28px; height: 28px; }
.rel-inicio:hover { color: #3284BA; }
a.btn-circulo { text-decoration: none; flex: none; }
.rel-titulo { font-size: 26px; font-weight: 300; color: #8C8C8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-loja { font-size: 13px; color: #75767A; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }

/* botao Exportar (PDF / Excel), no estilo dos circulos do topo */
.exportar { position: relative; flex: none; }
.btn-exportar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 12px 0 14px;
  border: 2px solid #8A8B8F; border-radius: 999px; background: transparent;
  color: #5B5B5F; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-exportar:hover, .btn-exportar[aria-expanded="true"] { border-color: #3284BA; color: #3284BA; }
.btn-exportar:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn-exportar.carregando::after { border-color: #D6E6F2; border-top-color: #4681B4; }
.menu-exportar {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 240px; padding: 6px;
  background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: var(--raio-md); box-shadow: var(--sombra-2);
}
.menu-exportar button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: var(--raio-sm); background: transparent; cursor: pointer;
  text-align: left; color: var(--texto); font-size: 14px; font-weight: 500;
}
.menu-exportar button:hover, .menu-exportar button:focus-visible { background: #EAF6FC; outline: none; }
.menu-exportar .icone { width: 22px; height: 22px; color: #4681B4; }
.menu-exportar small { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }

.rel-corpo { position: relative; min-height: calc(100vh - 64px); }

/* O filtro e as setas ficam presos na tela, logo abaixo do topo (64px, a altura do .rel-topo),
   e nao no meio do relatorio: num relatorio de milhares de linhas, o meio dele fica longe da
   vista, e a seta de reabrir sumia. Assim a seta e o formulario aparecem em qualquer rolagem. */
.rel-filtros {
  position: fixed; top: 64px; left: 0; bottom: 0; z-index: 10;
  width: 600px; padding: 24px 44px 32px 28px; overflow-y: auto;
  background: #FFFFFF; border-right: 1px solid #E3E3E3;
  transform: translateX(-100%); transition: transform .22s ease, box-shadow .22s;
}
.rel-filtros.aberto { transform: none; }
.rel-corpo.com-relatorio .rel-filtros.aberto { box-shadow: 10px 0 28px -14px rgba(0, 0, 0, .3); }

.filtro-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.filtro-linha { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; }
.filtro-linha > label { font-size: 13px; color: #696969; text-transform: uppercase; letter-spacing: .02em; }
.filtro-campo {
  width: 100%; height: 36px; padding: 0 10px;
  background: #FFFFFF; border: 1px solid #B9B9B9; border-radius: 0;
  font-size: 14px; color: #222222;
}
.filtro-campo:focus { outline: none; border-color: #4681B4; box-shadow: 0 0 0 2px rgba(70, 129, 180, .25); }
select.filtro-campo { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.filtro-campo.invalida { border-color: var(--perigo); }
.filtro-periodo { display: grid; grid-template-columns: minmax(0, 1fr) 62px auto minmax(0, 1fr) 62px; align-items: center; gap: 6px; }
.filtro-periodo .filtro-campo { padding: 0 6px; font-size: 13.5px; }
/* hora digitada "__:__" como no InovaFarma (sem o reloginho, que nao cabe) */
@media (min-width: 901px) {
  .filtro-periodo input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
}
.filtro-ate { font-size: 13px; color: #696969; }
.filtro-recuo { margin-left: 128px; }
.filtro-info {
  display: flex; gap: 10px; padding: 10px 12px;
  background: #EAF6FC; border: 1px solid #75A7BD;
  color: #3D4F5C; font-size: 13px; line-height: 1.45;
}
.filtro-info .icone { color: #4681B4; flex: none; margin-top: 1px; }
.filtro-form .aviso { border-radius: 0; }
.btn-visualiza {
  height: 40px; padding: 0 30px; border: 0; border-radius: 0;
  background: #4681B4; color: #FFFFFF; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.btn-visualiza:hover:not(:disabled) { background: #3B6F9C; }
.btn-visualiza:focus-visible { outline: 3px solid rgba(70, 129, 180, .45); outline-offset: 2px; }
.btn-visualiza:disabled { opacity: .7; cursor: progress; }

/* setas finas para abrir e fechar o painel de filtros */
.rel-seta {
  position: absolute; top: 50%; z-index: 12;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 64px; margin-top: -32px; padding: 0;
  border: 0; background: transparent; color: #7F7F7F; cursor: pointer;
}
.rel-seta .icone { width: 30px; height: 30px; }
.rel-seta:hover { color: #3284BA; }
.rel-seta:focus-visible { outline: 2px solid #4681B4; }
/* a de abrir: no meio da parte da tela abaixo do topo (50% + 32px = metade dos 64px do topo) */
.rel-seta-abrir { position: fixed; top: calc(50% + 32px); left: 4px; }
/* a de fechar: no meio do painel, que ja' esta' preso na tela */
.rel-seta-fechar { right: 6px; }

.rel-area { padding: 24px 32px 48px 44px; transition: margin-left .22s ease; }
.rel-corpo.filtros-abertos .rel-area { margin-left: 600px; }
.rel-vazio { padding: 72px 24px; text-align: center; color: #8C8C8C; font-size: 15px; }
.rel-carregando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 72px 24px; color: #5B5B5F; }
.giro { width: 22px; height: 22px; border: 3px solid #D6E6F2; border-top-color: #4681B4; border-radius: 50%; animation: girar .8s linear infinite; }

/* o relatorio em si, com cara de folha impressa */
.rel-papel { max-width: 1120px; background: #FFFFFF; border: 1px solid #E3E3E3; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); color: #000000; }
.rel-papel-faixa { height: 8px; background: #00A9FE; }
.rel-papel-conteudo { padding: 26px 32px 30px; }
.rel-papel-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rel-papel-titulo { font-size: 24px; font-weight: 700; color: #000000; letter-spacing: .01em; }
.rel-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 28px; margin: 10px 0 0; font-size: 13.5px; }
.rel-meta dt { font-weight: 700; }
.rel-meta dd { margin: 0; }
.rel-tabela-rolagem { margin-top: 18px; overflow-x: auto; }
.rel-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rel-tabela th {
  padding: 7px 8px; text-align: left; font-weight: 500; white-space: nowrap;
  border-top: 1px solid #000000; border-bottom: 1px solid #000000;
}
.rel-tabela td { padding: 6px 8px; border-bottom: 1px solid #EDEDED; }
.rel-tabela tbody tr:last-child td { border-bottom: 1px solid #000000; }
.rel-tabela .num { text-align: right; white-space: nowrap; }
.rel-tabela .sem-dados td { padding: 20px 8px; text-align: center; color: #666666; }
/* "TODAS": cada loja vira um bloco com o nome dela e um subtotal */
.rel-tabela tr.rel-grupo td {
  padding: 16px 8px 6px; font-weight: 700; font-size: 14px; letter-spacing: .01em;
  border-bottom: 2px solid #00A9FE;
}
.rel-tabela tbody + tbody tr.rel-grupo td { padding-top: 24px; }
.rel-tabela tr.rel-subtotal td { font-weight: 700; background: #F3F8FC; border-top: 1px solid #000000; }
.rel-tabela tr.rel-grupo { break-after: avoid; }
.rel-tabela tbody { break-inside: auto; }
.rel-totais {
  display: grid; grid-template-columns: max-content minmax(120px, max-content); justify-content: end;
  gap: 7px 28px; margin: 14px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.rel-totais dt, .rel-totais dd { margin: 0; font-weight: 700; text-align: right; }
.rel-rodape { margin-top: 22px; font-size: 12px; color: #777777; }

/* Produtos em promocao: um bloco por promocao, marcas de aviso e a legenda delas */
.opcao-todos { margin-top: -4px; font-weight: 500; letter-spacing: .01em; }
select.filtro-campo:disabled { background: #F2F2F2; color: #8C8C8C; cursor: not-allowed; }
.rel-tabela tr.rel-bloco td { padding: 14px 8px 6px; border-bottom: 1px solid #000000; }
.rel-tabela tr.rel-bloco { break-after: avoid; }
.rel-bloco-nome { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.rel-bloco-info { display: block; margin-top: 2px; font-size: 12.5px; color: #555555; }
.rel-bloco-aviso { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: #B35500; }
.rel-tabela .rel-obs { display: block; margin-top: 2px; font-size: 12px; color: #B35500; }
.rel-tabela .rel-alerta { font-weight: 500; color: #B35500; }
.rel-tabela .rel-preco-promo { font-weight: 700; }
.rel-tabela .rel-fabricante { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-tabela .rel-data { white-space: nowrap; }
.rel-legenda { margin: 16px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #555555; }

@media print {
  .rel-topo, .rel-filtros, .rel-seta, .avisos-rapidos, .rel-imprimir, .exportar { display: none !important; }
  .rel-area, .rel-corpo.filtros-abertos .rel-area { margin: 0; padding: 0; }
  .rel-papel { max-width: none; border: 0; box-shadow: none; }
  .rel-papel-faixa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* no papel nao ha' rolagem de lado: o que passasse da largura seria cortado */
  .rel-tabela-rolagem { overflow: visible; }
  /* produtos em promocao: 8 colunas cabem na largura de uma folha em pe' */
  .rel-tabela-promo { font-size: 10.5px; }
  .rel-tabela-promo th, .rel-tabela-promo td { padding: 4px 5px; }
  .rel-tabela-promo th { white-space: normal; }
  .rel-tabela-promo .rel-fabricante { max-width: 105px; }
  .rel-tabela-promo tr.rel-bloco td { padding: 10px 5px 4px; }
  .rel-tabela-promo .rel-bloco-nome { font-size: 11.5px; }
  .rel-tabela-promo .rel-bloco-info, .rel-tabela-promo .rel-bloco-aviso, .rel-tabela-promo .rel-obs { font-size: 10px; }
}

/* =========================================================
   IMPORTAR PROMOCAO: dois passos lado a lado, com o amarelo
   do grupo "Importação" (#DCBF00) e o formulario do InovaFarma
   ========================================================= */
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.imp-conteudo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  gap: 24px; max-width: 1440px; padding: 24px 28px 48px;
}
.imp-aviso-simulacao { grid-column: 1 / -1; border-radius: 0; }
.imp-passo { background: #FFFFFF; border: 1px solid #E3E3E3; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); min-width: 0; }
.imp-passo-faixa { height: 6px; background: #DCBF00; }
.imp-passo-corpo { padding: 22px 26px 26px; }
.imp-passo-cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.imp-numero {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #DCBF00; color: #FFFFFF; font-size: 17px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.imp-passo-cabeca h2 { font-size: 19px; font-weight: 500; color: #3F3F43; }
.imp-passo-cabeca p { margin-top: 2px; font-size: 13px; color: #75767A; }

.filtro-rotulo { font-size: 13px; color: #696969; text-transform: uppercase; letter-spacing: .02em; }
.filtro-linha.alinha-topo { align-items: start; }
.filtro-linha.alinha-topo > .filtro-rotulo { padding-top: 5px; }
.filtro-data-hora { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 14px; }
.opcoes-lojas {
  display: grid; gap: 2px; max-height: 224px; overflow-y: auto;
  padding: 6px 10px; border: 1px solid #B9B9B9; background: #FFFFFF;
}
.opcao { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; color: #222222; cursor: pointer; }
.opcao input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: #4681B4; cursor: pointer; }
.opcao-todas { margin-bottom: 4px; font-weight: 500; }

.campo-arquivo { width: 100%; padding: 5px; font-size: 14px; background: #FFFFFF; border: 1px solid #B9B9B9; }
.campo-arquivo::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border: 0; background: #E9EEF3; color: #2B2B2E; font: inherit; cursor: pointer;
}
.campo-arquivo.invalida { border-color: var(--perigo); }
.imp-colunas { margin: 8px 0 6px; border-collapse: collapse; font-size: 12.5px; }
.imp-colunas th, .imp-colunas td { padding: 3px 10px; border: 1px solid #75A7BD; background: #FFFFFF; text-align: left; }
.imp-colunas th { font-weight: 700; color: #2B2B2E; }
.imp-colunas td { color: #6E6E73; }
.link-botao { padding: 0; border: 0; background: none; color: #3284BA; font: inherit; text-decoration: underline; cursor: pointer; }
.link-botao:hover { color: #00699E; }

.imp-resultado { margin-top: 22px; padding-top: 18px; border-top: 1px solid #E3E3E3; }
.imp-resultado h3 { font-size: 16px; font-weight: 500; color: #3F3F43; }
.imp-sub { margin-top: 4px; font-size: 13px; color: #75767A; }
.imp-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.imp-chip { padding: 5px 10px; border-radius: var(--raio-sm); font-size: 13px; font-weight: 500; }
.imp-chip-ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.imp-chip-info { background: #EAF6FC; color: #00699E; }
.imp-chip-neutro { background: var(--superficie-2); color: var(--texto-2); }
.imp-chip-erro { background: var(--perigo-fundo); color: var(--perigo); }
.imp-chip-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.imp-nada { margin-top: 12px; font-size: 14px; color: var(--perigo); }
.imp-detalhes { margin-top: 14px; }
.imp-detalhes summary { cursor: pointer; font-size: 14px; font-weight: 500; color: #3F3F43; }
.imp-tabela-rolagem { max-height: 320px; margin-top: 8px; overflow: auto; border: 1px solid #E3E3E3; }
.imp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-tabela th {
  position: sticky; top: 0; padding: 6px 8px; text-align: left; font-weight: 500; white-space: nowrap;
  background: #F2F3F5; border-bottom: 1px solid #DCDEE2;
}
.imp-tabela td { padding: 5px 8px; border-bottom: 1px solid #EDEDED; vertical-align: top; }
.imp-tabela td:first-child { color: var(--texto-3); }

/* =========================================================
   ETIQUETA (grupo Gerencial): quadrados a' esquerda e a lista de
   produtos, como o "Gerenciar produtos / Etiquetas" do InovaFarma.
   Cores medidas na tela do sistema: quadrado #459FA5, quadrado aberto
   #4565A5 com contorno #696A67, grade #F7F8F5 / #BABBB8, barra do
   rodape #4280B2 (aqui #3F7BAD: o mesmo azul, um pouco mais escuro
   para o texto branco passar de 4,5:1).
   ========================================================= */
.etq-corpo {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px;
  height: calc(100vh - 64px); padding: 14px 20px 14px 14px;
}
@supports (height: 100dvh) { .etq-corpo { height: calc(100dvh - 64px); } }

.etq-menu { display: flex; flex-direction: column; gap: 8px; padding: 3px; }
.etq-ladrilho {
  display: flex; flex-direction: column; justify-content: space-between; flex: none;
  width: 112px; height: 112px; padding: 10px 10px 8px;
  border: 0; border-radius: 0; background: #459FA5; color: #FFFFFF;
  text-align: left; cursor: pointer; transition: background-color .12s, transform .08s ease;
}
.etq-ladrilho .icone { width: 42px; height: 42px; align-self: flex-end; }
.etq-ladrilho-rotulo { font-size: 14px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.etq-ladrilho[aria-pressed="true"] { background: #4565A5; outline: 1px solid #696A67; outline-offset: 2px; }
/* passando o mouse fica laranja, como os quadrados do painel */
.etq-ladrilho:hover, .etq-ladrilho:focus-visible { background: #FE7F00; }
.etq-ladrilho[aria-pressed="true"] .etq-ladrilho-rotulo,
.etq-ladrilho:hover .etq-ladrilho-rotulo,
.etq-ladrilho:focus-visible .etq-ladrilho-rotulo { text-shadow: none; }
.etq-ladrilho:focus-visible { outline: 3px solid #3284BA; outline-offset: 2px; }
.etq-ladrilho:active { transform: scale(.97); }

.etq-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.etq-secao { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* campo PRODUTO (com os "..." do InovaFarma) */
.etq-busca {
  display: grid; grid-template-columns: auto minmax(150px, 260px) auto minmax(0, 1fr);
  align-items: center; gap: 6px 10px;
  padding: 10px 12px; background: #FFFFFD; border: 1px solid #BABBB8;
}
.etq-busca > label { font-size: 13px; color: #696969; text-transform: uppercase; letter-spacing: .02em; }
.etq-campo-produto { position: relative; display: flex; min-width: 0; }
.etq-campo-produto .filtro-campo { height: 38px; padding-right: 48px; font-size: 15px; }
.etq-btn-buscar {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-left: 1px solid #E1E2DE; background: #FFFFFF; color: #5B5B5F; cursor: pointer;
}
.etq-btn-buscar:hover { background: #EAF6FC; color: #3284BA; }
.etq-btn-buscar:focus-visible { outline: 2px solid #4681B4; outline-offset: -2px; }
.etq-btn-buscar.carregando::after { border-color: #D6E6F2; border-top-color: #4681B4; }
.etq-dica { grid-column: 4; font-size: 12.5px; color: #75767A; }

/* grade de produtos */
.etq-grade { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 10px; background: #FFFFFD; border: 1px solid #BABBB8; }
.etq-grade-rolagem { position: relative; flex: 1; min-height: 0; overflow: auto; }
.etq-tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.etq-tabela th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 10px; text-align: left; font-weight: 400; color: #333333; white-space: nowrap;
  background: #F7F8F5; border-bottom: 1px solid #BABBB8; border-right: 1px solid #E4E5E1;
}
.etq-tabela th:last-child { border-right: 0; }
.etq-th-sub { font-size: 12px; color: #8C8C8C; }
.etq-tabela td { padding: 6px 10px; border-bottom: 1px solid #EDEDEB; vertical-align: middle; }
.etq-tabela tbody tr:hover td { background: #F7FBFE; }
.etq-tabela .num { text-align: right; white-space: nowrap; }
.etq-tabela .etq-col-n { width: 44px; text-align: right; color: #8C8C8C; }
.etq-col-codigo { width: 140px; white-space: nowrap; }
.etq-col-codigo b { display: block; font-weight: 500; }
.etq-col-codigo small { display: block; font-size: 12px; color: #75767A; }
.etq-tabela .etq-col-qtde { width: 92px; }
/* o nome (que pode ser editado) fica com a maior parte da largura */
.etq-tabela .etq-col-nome { width: 46%; }
.etq-col-acoes { width: 52px; text-align: right; }

/* o nome e' um campo: muda so' na etiqueta, o cadastro do InovaFarma nao */
.etq-nome { display: flex; align-items: center; gap: 4px; }
.etq-nome-campo, .etq-qtde {
  height: 34px; padding: 0 8px;
  background: #FFFFFF; border: 1px solid #D5D6D2; border-radius: 0; color: #222222; font-size: 14px;
}
.etq-nome-campo { flex: 1; min-width: 0; }
.etq-qtde { width: 72px; padding-right: 4px; text-align: right; }
.etq-nome-campo:hover, .etq-qtde:hover { border-color: #A9AAA6; }
.etq-nome-campo:focus, .etq-qtde:focus { outline: none; border-color: #4681B4; box-shadow: 0 0 0 2px rgba(70, 129, 180, .25); }
.etq-restaurar { display: none; width: 32px; height: 32px; }
.etq-nome-original { display: none; margin-top: 2px; font-size: 12px; color: #75767A; }
tr.etq-editado .etq-nome-campo { border-color: #E3A04F; background: #FFF9F1; }
tr.etq-editado .etq-restaurar { display: inline-flex; }
tr.etq-editado .etq-nome-original { display: block; }

.etq-col-promo b { display: block; font-weight: 700; color: #B35500; }
.etq-col-promo small { display: block; max-width: 230px; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #75767A; }
.etq-alerta-linha { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--alerta); }
.etq-alerta-linha .icone { width: 14px; height: 14px; }
.etq-tabela tr.etq-sem-preco td { background: #FDF3F3; }
tr.etq-sem-preco .etq-alerta-linha { color: var(--perigo); }
tr.etq-sem-preco .etq-col-preco, tr.etq-sem-preco .etq-qtde { color: #9A9A9A; }
.etq-texto-perigo { color: var(--perigo); }
/* produto que acabou de entrar (ou ganhou mais uma etiqueta) */
.etq-tabela tr.etq-destaque td { animation: etq-destaque 1.6s ease-out; }
@keyframes etq-destaque { from { background: #FFE9B8; } }

.etq-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 56px 16px; text-align: center; color: #8C8C8C; }
.etq-vazio .icone { width: 40px; height: 40px; margin-bottom: 6px; color: #9CC9DC; }
.etq-vazio p { font-size: 15px; color: #5B5B5F; }
.etq-vazio small { font-size: 13px; }

.etq-contagem {
  display: flex; justify-content: flex-end; gap: 24px;
  padding: 7px 14px; background: #F7F8F5; border-top: 1px solid #BABBB8;
  font-size: 13px; color: #5B5B5F;
}
.etq-contagem b { margin-left: 6px; font-size: 15px; color: #222222; font-variant-numeric: tabular-nums; }

/* barra azul do rodape: Limpar a' esquerda; layout e Imprimir a' direita */
.etq-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 66px; margin-top: 10px; padding: 6px 14px;
  background: #3F7BAD; color: #FFFFFF;
}
.etq-rodape-dir { display: flex; align-items: center; gap: 12px; min-width: 0; }
.etq-rodape-rotulo { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.etq-layout {
  height: 38px; min-width: 0; max-width: 340px; padding: 0 10px;
  background: #FFFFFF; border: 0; border-radius: 0; color: #222222; font-size: 14px; text-overflow: ellipsis;
}
.etq-layout:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.etq-acao {
  position: relative; flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 78px; height: 54px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 0; color: #FFFFFF; font-size: 13.5px; cursor: pointer;
}
.etq-acao .icone { width: 26px; height: 26px; }
.etq-acao:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.etq-acao:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.etq-acao-imprimir { background: rgba(255, 255, 255, .12); font-weight: 500; }

/* os avisos rapidos sobem acima da contagem e da barra azul (nao podem cobrir o Imprimir)
   e deixam o clique passar: nao tem nada clicavel neles */
.pagina-etiqueta .avisos-rapidos { bottom: 150px; pointer-events: none; }

/* escolher entre varios produtos (busca por nome ou codigo repetido) */
.etq-modal { max-width: 760px; }
.etq-escolhas { display: grid; gap: 4px; max-height: min(60vh, 520px); margin-top: 14px; padding: 2px; overflow-y: auto; }
.etq-escolha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 10px 12px;
  background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 0;
  text-align: left; font-size: 14px; color: var(--texto); cursor: pointer;
}
.etq-escolha:hover, .etq-escolha:focus-visible { background: #EAF6FC; border-color: #4681B4; outline: none; }
.etq-escolha-nome { min-width: 0; }
.etq-escolha-nome b { display: block; font-weight: 500; }
.etq-escolha-nome small, .etq-escolha-preco small { display: block; font-size: 12px; color: #75767A; }
.etq-escolha-preco { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.etq-escolha-preco b { display: block; color: #B35500; }
.etq-escolha-preco .etq-texto-perigo { color: var(--perigo); }

/* =========================================================
   NOVO LAYOUT (Etiqueta): os layouts salvos, a escolha da folha
   e do formato, e o editor (campos arrastados na etiqueta).
   ========================================================= */
.lay-secao { min-height: 0; }
.lay-vista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lay-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px 2px 14px; }
.lay-cabeca h2 { font-size: 20px; font-weight: 500; color: #3F3F43; }
.lay-cabeca p { margin-top: 3px; font-size: 13.5px; color: #75767A; }
.lay-cabeca-titulo { display: flex; align-items: center; gap: 12px; }
.lay-btn-novo { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lay-btn-novo .icone { width: 18px; height: 18px; }

/* lista dos layouts */
.lay-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; gap: 14px;
  flex: 1; min-height: 0; padding: 2px; overflow-y: auto;
}
.lay-carregando { padding: 40px 8px; color: #8C8C8C; }
.lay-cartao { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #D5D6D2; }
.lay-cartao:hover { border-color: #A9AAA6; }
.lay-miniatura {
  display: flex; align-items: center; justify-content: center; height: 164px; padding: 14px;
  background: #E9ECEF; border: 0; border-bottom: 1px solid #E4E5E1; cursor: pointer;
}
.lay-miniatura:hover { background: #E0E8EF; }
.lay-miniatura:focus-visible { outline: 2px solid #4681B4; outline-offset: -2px; }
.lay-cartao-info { flex: 1; padding: 12px 14px 10px; }
.lay-cartao-info h3 { font-size: 15.5px; font-weight: 500; color: #222222; overflow-wrap: anywhere; }
.lay-cartao-info p { margin-top: 4px; font-size: 12.5px; color: #5B5B5F; }
.lay-cartao-info small { display: block; margin-top: 4px; font-size: 12px; color: #8C8C8C; }
.lay-cartao-acoes { display: flex; border-top: 1px solid #E4E5E1; }
.lay-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
  height: 40px; padding: 0 8px; background: transparent; border: 0;
  color: #3F7BAD; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.lay-acao + .lay-acao { border-left: 1px solid #E4E5E1; }
.lay-acao:hover { background: #EAF6FC; }
.lay-acao:focus-visible { outline: 2px solid #4681B4; outline-offset: -2px; }
.lay-acao-perigo { flex: none; width: 92px; color: var(--perigo); }
.lay-acao-perigo:hover { background: var(--perigo-fundo); }
.lay-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 64px 16px;
  background: #FFFFFD; border: 1px dashed #BABBB8; color: #8C8C8C; text-align: center;
}
.lay-vazio .icone { width: 44px; height: 44px; margin-bottom: 6px; color: #9CC9DC; }
.lay-vazio p { font-size: 16px; color: #5B5B5F; }

/* folha e formato */
.lay-formato { display: grid; align-content: start; gap: 22px; max-width: 940px; padding: 6px 2px 24px; overflow-y: auto; }
.lay-passo { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.lay-passo-n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #4565A5; color: #FFFFFF; font-size: 14px; font-weight: 700;
}
.lay-passo-titulo { display: block; margin: 5px 0 10px; font-size: 13px; color: #696969; text-transform: uppercase; letter-spacing: .02em; }
.lay-folha { max-width: 280px; }
.lay-folha-dica { margin-top: 6px; }
.lay-colunas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lay-linhas-dica { margin: -4px 0 10px; }
.lay-linhas-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lay-opcao {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px;
  background: #FFFFFF; border: 1px solid #D5D6D2; color: #222222; text-align: center; cursor: pointer;
}
.lay-opcao b { font-size: 14.5px; font-weight: 500; }
.lay-opcao small { font-size: 12px; color: #75767A; }
.lay-opcao:hover { background: #FFF8F0; border-color: #FE7F00; }
.lay-opcao[aria-pressed="true"] { background: #EEF1F9; border-color: #4565A5; box-shadow: inset 0 0 0 1px #4565A5; }
.lay-opcao:focus-visible { outline: 3px solid #3284BA; outline-offset: 2px; }
/* folha A4 em miniatura (210 x 297) com as etiquetas */
.lay-mini-folha {
  display: grid; width: 58px; height: 82px; gap: 2px; padding: 4px;
  background: #FFFFFF; border: 1px solid #BABBB8; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.lay-mini-folha span { background: #9CC9DC; }
.lay-opcao:hover .lay-mini-folha span { background: #FFB066; }
.lay-opcao[aria-pressed="true"] .lay-mini-folha span { background: #4565A5; }
/* a quantidade padrao de linhas (3 colunas = 7 linhas = 21 por folha...) */
.lay-selo {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px;
  background: #459FA5; color: #FFFFFF; font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
/* outra quantidade de linhas (1 a 20) */
.lay-outra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13.5px; color: #3F3F43; }
.lay-outra-n {
  width: 52px; height: 30px; padding: 0 4px;
  background: #FFFFFF; border: 0; border-left: 1px solid #B9B9B9; border-right: 1px solid #B9B9B9;
  font-size: 14px; text-align: center; font-variant-numeric: tabular-nums;
}
.lay-outra-n:focus { outline: 2px solid #4681B4; outline-offset: -2px; }
.lay-outra-medida { min-width: 170px; font-size: 12.5px; color: #75767A; }
.lay-outra-usar { height: 34px; padding: 0 20px; }

/* editor */
.lay-barra { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; }
.lay-barra-rotulo { font-size: 13px; color: #696969; text-transform: uppercase; letter-spacing: .02em; }
.lay-nome { width: min(360px, 32vw); height: 38px; font-size: 15px; }
.lay-resumo { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: #75767A; white-space: nowrap; text-overflow: ellipsis; }
.lay-estado { font-size: 12.5px; color: #75767A; white-space: nowrap; }
.lay-estado-sujo { color: var(--alerta); }
.lay-area { display: grid; grid-template-columns: 228px minmax(0, 1fr) 284px; gap: 12px; flex: 1; min-height: 0; }
.lay-painel { min-height: 0; padding: 12px 14px 16px; overflow-y: auto; background: #FFFFFD; border: 1px solid #BABBB8; }
.lay-painel-titulo { font-size: 13px; font-weight: 500; color: #3F3F43; text-transform: uppercase; letter-spacing: .03em; }
.lay-dica { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #75767A; }
.lay-campos { display: grid; gap: 6px; margin: 10px 0 22px; }
.lay-campo {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  background: #FFFFFF; border: 1px solid #D5D6D2; color: #222222; font-size: 14px; text-align: left;
  cursor: grab; touch-action: none; user-select: none;
}
.lay-campo span { flex: 1; }
.lay-campo .icone { width: 18px; height: 18px; color: #459FA5; flex: none; }
.lay-campo:hover { background: #FFF8F0; border-color: #FE7F00; }
.lay-campo:hover .icone { color: #FE7F00; }
.lay-campo:focus-visible { outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-campo-usado { background: #F4F6F8; color: #5B5B5F; cursor: pointer; }
.lay-campo-usado .lay-campo-ok { width: 16px; height: 16px; color: #1B7A3E; }
.lay-folha-info { margin: 6px 0 10px; font-size: 13px; color: #5B5B5F; }
.lay-linhas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 13.5px; color: #3F3F43; }
.lay-passos { display: inline-flex; align-items: center; border: 1px solid #B9B9B9; background: #FFFFFF; }
.lay-passo-btn {
  width: 30px; height: 30px; padding: 0; background: #FFFFFF; border: 0;
  color: #3F3F43; font-size: 17px; line-height: 1; cursor: pointer;
}
.lay-passo-btn:hover:not(:disabled) { background: #EAF6FC; color: #3284BA; }
.lay-passo-btn:disabled { color: #C5C8CE; cursor: not-allowed; }
.lay-passo-btn:focus-visible { outline: 2px solid #4681B4; outline-offset: -2px; }
.lay-linhas-valor { min-width: 34px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.lay-trocar { margin-top: 12px; font-size: 13.5px; }

/* a etiqueta no meio, sobre a "mesa" cinza */
.lay-palco { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #E9ECEF; border: 1px solid #BABBB8; }
.lay-palco-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; background: #F7F8F5; border-bottom: 1px solid #D5D6D2; }
.lay-palco-rotulo { font-size: 13px; color: #696969; }
.lay-alternar { display: inline-flex; border: 1px solid #B9B9B9; }
.lay-alternar button { height: 30px; padding: 0 12px; background: #FFFFFF; border: 0; color: #3F3F43; font-size: 13px; white-space: nowrap; cursor: pointer; }
.lay-alternar button + button { border-left: 1px solid #B9B9B9; }
.lay-alternar button[aria-pressed="true"] { background: #4565A5; color: #FFFFFF; }
.lay-alternar button:focus-visible { outline: 2px solid #4681B4; outline-offset: -2px; }
.lay-medida { margin-left: auto; font-size: 13px; color: #5B5B5F; font-variant-numeric: tabular-nums; }
/* bloco pronto "DE POR" */
.lay-btn-depor {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: #FFFFFF; border: 1px solid #FE7F00; color: #B35500;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; cursor: pointer;
}
.lay-btn-depor .icone { width: 16px; height: 16px; }
.lay-btn-depor:hover { background: #FE7F00; color: #FFFFFF; }
.lay-btn-depor:focus-visible { outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-quando { display: grid; gap: 2px; }
.lay-tela { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; overflow: hidden; outline: none; }
.lay-tela:focus-visible { box-shadow: inset 0 0 0 2px rgba(70, 129, 180, .5); }
.lay-tela.lay-soltar .etl-caixa > .etl { box-shadow: 0 0 0 3px #FE7F00, 0 6px 18px rgba(0, 0, 0, .18); }
.lay-tela-vazia {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  color: #8C8C8C; font-size: 13px; text-align: center; pointer-events: none;
}
.lay-palco-dica { padding: 7px 12px; background: #F7F8F5; border-top: 1px solid #D5D6D2; font-size: 12px; color: #75767A; }
/* laco: arrastando numa parte vazia, escolhe os itens que o retangulo tocar */
.lay-laco { position: absolute; z-index: 5; border: 1px solid #0087CA; background: rgba(0, 135, 202, .1); pointer-events: none; }
.lay-fantasma {
  position: fixed; z-index: 90; padding: 6px 10px; transform: translate(-50%, -130%);
  background: #4565A5; color: #FFFFFF; font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); pointer-events: none;
}

/* aparencia do campo (a' direita) */
.lay-props-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.lay-props-topo .icone { width: 18px; height: 18px; color: #4565A5; }
.lay-prop { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; }
.lay-prop-rotulo { font-size: 12.5px; color: #696969; }
.lay-prop .filtro-campo { height: 34px; }
.lay-tamanho { display: flex; align-items: center; gap: 4px; }
.lay-tamanho .lay-passo-btn { border: 1px solid #B9B9B9; }
.lay-numero { width: 66px; padding: 0 6px; text-align: right; }
.lay-unidade { font-size: 12.5px; color: #75767A; }
.lay-estilo { display: flex; align-items: center; gap: 8px; }
.lay-alinhar { display: inline-flex; }
.lay-alt {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px;
  background: #FFFFFF; border: 1px solid #B9B9B9; color: #3F3F43; cursor: pointer;
}
.lay-alinhar .lay-alt + .lay-alt { border-left: 0; }
.lay-alt .icone { width: 18px; height: 18px; }
.lay-alt[aria-pressed="true"] { background: #4565A5; border-color: #4565A5; color: #FFFFFF; }
.lay-alt:focus-visible { position: relative; z-index: 1; outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-negrito { font-size: 15px; font-weight: 700; }
.lay-grupo-cor { display: flex; align-items: center; gap: 8px; }
.lay-cor { width: 40px; height: 32px; padding: 2px; background: #FFFFFF; border: 1px solid #B9B9B9; cursor: pointer; }
.lay-amostras { display: flex; flex-wrap: wrap; gap: 4px; }
.lay-amostra { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, .25); cursor: pointer; }
.lay-amostra:focus-visible { outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-marcador { margin: 2px 0 6px; font-size: 13.5px; }
.lay-formato-codigo { display: grid; gap: 2px; }
.lay-sub { margin: 14px 0 8px; font-size: 12.5px; font-weight: 500; color: #3F3F43; }
.lay-medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lay-medida-campo { display: grid; gap: 3px; font-size: 12px; color: #696969; }
.lay-medida-campo .lay-numero { width: 100%; height: 32px; }
.lay-dica-preco { margin-top: 10px; padding: 8px 10px; background: #EAF6FC; border: 1px solid #C8E2F0; color: #3D4F5C; }
.lay-tirar { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--perigo); font-size: 13.5px; text-decoration: none; }
.lay-tirar:hover { color: var(--perigo-hover); text-decoration: underline; }
.lay-props-medida { margin-top: 8px; font-size: 22px; font-weight: 300; color: #222222; font-variant-numeric: tabular-nums; }
.lay-dica-texto { margin: -4px 0 12px; }
/* varios itens escolhidos: os nomes deles no painel */
.lay-grupo-itens { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.lay-grupo-itens li {
  max-width: 100%; padding: 3px 8px; overflow: hidden; background: #EEF1F7; border: 1px solid #D5DBE8;
  color: #3F3F43; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap;
}
.lay-props-sub { margin: 2px 0 12px; font-size: 13px; color: #5B5B5F; }

/* enfeites (texto, formas, imagem) no painel da direita */
.lay-titulo-enfeitar { margin-top: 18px; padding-top: 14px; border-top: 1px solid #E4E5E1; }
.lay-enfeites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 14px; }
.lay-enfeite { padding: 8px 9px; font-size: 13.5px; }
.lay-enfeite .icone { color: #4565A5; }
.lay-dica-depois { margin-top: 4px; }
.lay-btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px;
  background: #FFFFFF; border: 1px solid #B9B9B9; color: #3F3F43; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.lay-btn-sec:hover { background: #EAF6FC; border-color: #4681B4; color: #3284BA; }
.lay-btn-sec:focus-visible { outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-camadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* grossura da borda: Fina / Media / Grossa e o numero em mm */
.lay-grossura { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lay-grossura-opcoes { display: inline-flex; }
.lay-chip {
  height: 30px; padding: 0 9px; background: #FFFFFF; border: 1px solid #B9B9B9;
  color: #3F3F43; font-size: 12.5px; cursor: pointer;
}
.lay-chip + .lay-chip { border-left: 0; }
.lay-chip:hover:not(:disabled) { background: #EAF6FC; color: #3284BA; }
.lay-chip[aria-pressed="true"] { background: #4565A5; border-color: #4565A5; color: #FFFFFF; }
.lay-chip:focus-visible { position: relative; z-index: 1; outline: 2px solid #4681B4; outline-offset: 1px; }
.lay-desligado { opacity: .45; }
.lay-desligado button, .lay-desligado input { cursor: not-allowed; }

/* "sem cor": quadradinho branco cortado por um risco vermelho */
.lay-amostra-nenhuma { background: linear-gradient(135deg, #FFFFFF 44%, #C42B36 44%, #C42B36 56%, #FFFFFF 56%); }
.lay-cor.lay-cor-nenhuma { opacity: .35; }

/* ---------- etiqueta montada em "Novo layout" (editor, miniatura e papel) ----------
   Tudo em mm/pt: o editor mostra no tamanho certo, so' ampliado (transform). */
.etl-caixa { position: relative; flex: none; }
.etl-caixa > .etl { position: absolute; top: 0; left: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.etl {
  position: relative; overflow: hidden; background: #FFFFFF; color: #000000; transform-origin: 0 0;
  /* fundo e formas coloridas tambem saem no papel (sem depender de "imprimir fundos") */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.etl-corte { outline: .2mm dashed #9A9A9A; outline-offset: -.1mm; }
/* borda da etiqueta: por cima de tudo e por dentro da etiqueta, sem mudar a posicao dos campos */
.etl-com-borda::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: var(--etl-borda-espessura, .5mm) solid var(--etl-borda-cor, #000000);
}
.etl-campo { position: absolute; overflow: hidden; line-height: 1.15; overflow-wrap: anywhere; }
.etl-riscado { text-decoration: line-through; }
/* textos: so' as linhas inteiras que cabem (o numero vem do desenho, em --linhas). Fica no
   texto e nao na caixa: com a caixa mais alta que as linhas, a linha seguinte apareceria pela metade */
.etl-limite { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--linhas, 1); overflow: hidden; }
.etl-barras { display: flex; flex-direction: column; }
.etl-barras svg { display: block; flex: 1; width: 100%; min-height: 0; }
.etl-barras span { display: block; padding-top: .3mm; line-height: 1; letter-spacing: .06em; }
/* enfeites: formas, linha e imagem */
.etl-forma { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.etl-traco {
  position: absolute; left: 0; right: 0; top: 50%; height: 0; transform: translateY(-50%);
  border-width: var(--espessura, .4mm) 0 0 0;
}
.etl-traco.etl-traco-v {
  left: 50%; right: auto; top: 0; bottom: 0; width: 0; height: auto; transform: translateX(-50%);
  border-width: 0 0 0 var(--espessura, .4mm);
}
.etl-imagem img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* so' no editor: caixa de cada campo, escolhido, canto de mudar tamanho e guias do centro */
.etl-ed .etl-campo { outline: calc(1px / var(--escala, 1)) dashed rgba(69, 101, 165, .45); cursor: move; touch-action: none; user-select: none; }
.etl-ed .etl-campo:hover { outline-color: #FE7F00; }
/* o escolhido vem para a frente: da' para arrastar mesmo se outro campo estiver por cima.
   Forma escolhida fica na camada dela (senao cobriria os textos que estao em cima). */
.etl-ed .etl-sel, .etl-ed .etl-sel:hover { z-index: 2; outline: calc(2px / var(--escala, 1)) solid #0087CA; }
.etl-ed .etl-sel.etl-forma { z-index: auto; }
.etl-oculto { opacity: .3; }
/* texto que nao cabe na caixa (sai cortado no papel) */
.etl-ed .etl-cortado { outline: calc(2px / var(--escala, 1)) dashed #C42B36; }
.etl-ed .etl-sel.etl-cortado, .etl-ed .etl-sel.etl-cortado:hover { outline: calc(2px / var(--escala, 1)) solid #C42B36; }
.lay-aviso-cortado { margin: -4px 0 12px; padding: 8px 10px; background: var(--perigo-fundo); color: var(--perigo); font-size: 12.5px; line-height: 1.4; }
.etl-alca {
  position: absolute; right: 0; bottom: 0;
  width: calc(11px / var(--escala, 1)); height: calc(11px / var(--escala, 1));
  background: #0087CA; cursor: nwse-resize;
}
/* texto escrito direto na etiqueta (clique duplo): por cima de tudo, inteiro e sem apagado */
.etl-ed .etl-editando, .etl-ed .etl-editando:hover {
  z-index: 4; overflow: visible; opacity: 1; cursor: text;
  outline: calc(2px / var(--escala, 1)) solid #FE7F00;
}
.etl-editavel {
  display: block; min-height: 1.15em; outline: none; cursor: text;
  -webkit-user-select: text; user-select: text; white-space: pre-wrap;
}
/* mede a largura de um texto numa linha so' (invisivel, sai logo depois) */
.etl-regua { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.etl-guia { position: absolute; display: none; pointer-events: none; }
.etl-guia-v { top: 0; bottom: 0; left: 50%; border-left: calc(1px / var(--escala, 1)) dashed #FE7F00; }
.etl-guia-h { top: 50%; left: 0; right: 0; border-top: calc(1px / var(--escala, 1)) dashed #FE7F00; }
.mostra-guia-v .etl-guia-v, .mostra-guia-h .etl-guia-h { display: block; }

/* ---------- a etiqueta impressa (so' existe no papel) ----------
   Tudo em mm/pt e preto puro: sai igual em impressora termica e em folha A4. */
.etq-impressao { display: none; }
.etq-folha { display: grid; align-content: start; overflow: hidden; }
/* areas com nome: sem a faixa PROMOÇÃO a linha dela some e o resto fica no lugar */
.etq-et {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "faixa" "nome" "precos" "rodape";
  min-width: 0; min-height: 0; padding: 2.2mm 3mm 1.6mm; overflow: hidden;
  font-family: var(--fonte); color: #000000; line-height: 1.15;
}
.etq-et-faixa { grid-area: faixa; }
.etq-et-nome { grid-area: nome; }
.etq-et-precos { grid-area: precos; }
.etq-et-rodape { grid-area: rodape; }
.etq-et-faixa {
  justify-self: start; margin-bottom: 1mm; padding: .3mm 1.6mm;
  background: #000000; color: #FFFFFF; font-size: 6.5pt; font-weight: 700; letter-spacing: .08em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.etq-et-nome {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 8.5pt; font-weight: 700; overflow-wrap: anywhere;
}
.etq-et-precos { align-self: end; text-align: right; }
.etq-et-de { font-size: 7.5pt; text-decoration: line-through; }
.etq-et-preco { display: flex; align-items: baseline; justify-content: flex-end; gap: 1.2mm; line-height: 1; }
.etq-et-rs { font-size: 8pt; font-weight: 700; }
.etq-et-valor { font-size: 20pt; font-weight: 700; letter-spacing: -.02em; }
.etq-et-rodape { display: flex; justify-content: space-between; gap: 2mm; margin-top: .8mm; font-size: 6pt; }
.etq-impressao[data-layout="termica-60x40"] .etq-et-nome { -webkit-line-clamp: 3; font-size: 9pt; }
.etq-impressao[data-layout="termica-60x40"] .etq-et-valor { font-size: 24pt; }
/* faixa (100 x 30): nome a' esquerda, preco a' direita */
.etq-modelo-faixa .etq-et {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "faixa precos" "nome precos" "rodape rodape";
  column-gap: 3mm; padding: 1.8mm 3mm 1.2mm;
}
.etq-modelo-faixa .etq-et-faixa { grid-area: faixa; }
.etq-modelo-faixa .etq-et-nome { grid-area: nome; align-self: center; -webkit-line-clamp: 3; font-size: 10pt; }
.etq-modelo-faixa .etq-et-precos { grid-area: precos; align-self: center; }
.etq-modelo-faixa .etq-et-rodape { grid-area: rodape; }
.etq-modelo-faixa .etq-et-valor { font-size: 22pt; }

@media print {
  .pagina-etiqueta { background: #FFFFFF; }
  .pagina-etiqueta > :not(#impressao) { display: none !important; }
  .pagina-etiqueta #impressao { display: block; }
  .etq-folha { break-after: page; page-break-after: always; }
  .etq-folha:last-child { break-after: auto; page-break-after: auto; }
}

/* =========================================================
   ASSISTENTE NO WHATSAPP: tela da farmacia (passos no azul do
   grupo Gerencial) e da central (cartoes). Os baloes imitam o
   WhatsApp: fundo bege, pergunta em verde claro, resposta em branco.
   ========================================================= */
.wa .imp-passo-faixa, .wa .imp-numero { background: #00BDE1; }
.wa-largo { grid-column: 1 / -1; }
.wa-etapas { margin: 0 0 18px; padding-left: 20px; font-size: 14px; line-height: 1.7; color: #3F3F43; }
.wa-codigo-caixa {
  display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding: 18px;
  border: 1px dashed #00BDE1; background: #F2FBFE; text-align: center;
}
.wa-codigo { font-size: 38px; font-weight: 700; letter-spacing: .12em; color: #2B2B2E; font-variant-numeric: tabular-nums; }
.wa-codigo-texto { font-size: 13.5px; color: #3F3F43; }
.wa-abrir { text-decoration: none; }
.wa-aviso { margin-top: 16px; }
.giro-sm { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-width: 2px; vertical-align: -2px; }
.wa-numeros { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wa-numero { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E3E3E3; }
.wa-numero-icone { color: #00A9CC; }
.wa-numero-textos { flex: 1; min-width: 0; }
.wa-numero-textos strong { display: block; font-weight: 500; }
.wa-numero-textos small { display: block; font-size: 12.5px; color: #75767A; }
.wa-pergunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wa-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wa-sugestao {
  padding: 4px 11px; border: 1px solid #B9DDEB; border-radius: 999px;
  background: #F2FBFE; color: #00699E; font-size: 13px; cursor: pointer;
}
.wa-sugestao:hover { background: #E0F4FB; }
.wa-sugestao:focus-visible { outline: 2px solid #4681B4; outline-offset: 1px; }
.wa-conversa { display: grid; gap: 8px; margin-top: 16px; padding: 16px; background: #EFEAE2; }
.wa-balao {
  max-width: 520px; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  font-size: 14px; line-height: 1.5; color: #111B21; overflow-wrap: anywhere;
}
.wa-balao-eu { justify-self: end; background: #D9FDD3; }
.wa-balao-robo { justify-self: start; background: #FFFFFF; }
.wa-balao-erro { color: var(--perigo); }
/* resposta de vendas: imagem no tamanho de uma foto no WhatsApp; clicando, aumenta */
.wa-balao-imagem { width: 100%; max-width: 380px; padding: 4px; }
.wa-balao-imagem img { display: block; width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; }
.wa-balao-imagem.ampliada { max-width: 760px; }
.wa-balao-imagem.ampliada img { cursor: zoom-out; }

/* central de controle */
.wa-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; margin-top: 20px; }
.wa-grade .painel-lista { margin-top: 0; overflow-x: auto; }
.wa-cartao { padding: 20px 22px 22px; }
.wa-selo { margin-left: auto; }
.wa-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 16px; }
.wa-dados dt { font-size: 12.5px; color: var(--texto-3); }
.wa-dados dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.wa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wa-testes { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.wa-testes li { display: flex; align-items: flex-start; gap: 8px; }
.wa-testes li .icone { margin-top: 1px; }
.wa-testes li.ok { color: var(--sucesso); }
.wa-testes li.falha { color: var(--perigo); }
.wa-tecnico { margin-top: 16px; font-size: 13px; color: var(--texto-2); }
.wa-tecnico summary { cursor: pointer; }
.wa-tecnico pre {
  max-height: 260px; margin-top: 8px; padding: 10px; overflow: auto;
  background: var(--superficie-2); border-radius: var(--raio-sm);
  font-size: 12px; white-space: pre-wrap; word-break: break-all;
}
.wa-experimentar { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.barra-ferramentas h3 { font-size: 16px; }
.wa-tabela tbody tr { cursor: default; }
.wa-tabela td { vertical-align: top; }
.wa-tabela .num { text-align: right; white-space: nowrap; }
.wa-tabela details summary { cursor: pointer; }
.wa-tabela details .wa-balao { margin-top: 8px; }
.wa-vazio { padding: 24px 20px; font-size: 14px; color: var(--texto-3); }

/* Numero do robo (central): formulario ou situacao a' esquerda, QR Code a' direita */
/* Configuracao do robo: servidor e token manual ficam recolhidos (o normal e' o QR Code) */
.wa-avancado { padding-top: 12px; border-top: 1px solid var(--borda); }
.wa-avancado summary { cursor: pointer; font-size: 13.5px; color: var(--texto-2); }
.wa-avancado[open] summary { margin-bottom: 14px; }
.wa-avancado .campo + .campo { margin-top: 14px; }
.wa-robo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.wa-robo-texto { max-width: 560px; }
.wa-robo-situacao { margin: 0 0 12px; font-size: 14px; color: var(--texto); }
.wa-passos { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; color: var(--texto-2); }
.wa-qr { display: grid; justify-items: center; gap: 8px; max-width: 280px; text-align: center; }
.wa-qr img {
  width: 264px; height: 264px; padding: 8px;
  background: #FFFFFF; border: 1px solid var(--borda); border-radius: var(--raio-md);
  image-rendering: pixelated;
}

@media (max-width: 900px) {
  .wa-grade, .wa-dados, .wa-experimentar, .wa-pergunta, .wa-robo { grid-template-columns: minmax(0, 1fr); }
  .wa-codigo { font-size: 32px; }
  .wa-tabela { min-width: 720px; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .imp-conteudo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

  /* editor de layout: a aparencia do campo desce para baixo da etiqueta */
  .lay-editor { overflow-y: auto; }
  .lay-area { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: minmax(380px, 1fr) auto; }
  .lay-props { grid-column: 1 / -1; }
  .lay-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* filtro vira tela cheia por cima do relatorio */
  .rel-filtros { width: 100%; padding: 20px 16px 28px; }
  .rel-corpo.filtros-abertos .rel-area { margin-left: 0; }
  .rel-seta-fechar { top: 6px; right: 4px; height: 40px; margin-top: 0; }
  /* minmax(0, 1fr): uma lista com nome comprido nao pode alargar a tela */
  .filtro-linha { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filtro-recuo { margin-left: 0; }
  .filtro-periodo { grid-template-columns: minmax(0, 1fr) 88px; }
  .filtro-ate { grid-column: 1 / -1; }
  .rel-area { padding: 16px 12px 40px 36px; }
  .rel-topo { padding: 0 12px; gap: 8px; }
  .rel-titulo { font-size: 19px; }
  .rel-loja { display: none; }
  .rel-papel-conteudo { padding: 18px 14px 22px; }
  .rel-papel-titulo { font-size: 17px; }
  .rel-inicio { display: none; }
  .imp-conteudo { padding: 16px 12px 40px; gap: 16px; }
  .imp-passo-corpo { padding: 18px 14px 20px; }
  .btn-exportar { width: 38px; padding: 0; }
  .rotulo-exportar, .seta-exportar { display: none; }
  /* a tabela mantem as colunas e rola de lado dentro da folha */
  .rel-tabela { min-width: 660px; }
  .rel-tabela-promo { min-width: 860px; }

  /* etiqueta: quadrados em cima, lista com rolagem de lado, rodape preso embaixo */
  .etq-corpo { display: block; height: auto; padding: 12px 12px 0; }
  .etq-menu { flex-direction: row; padding: 3px 3px 12px; }
  .etq-ladrilho { flex: 1; width: auto; height: 64px; flex-direction: row; align-items: flex-end; }
  .etq-ladrilho .icone { width: 30px; height: 30px; }
  .etq-busca { grid-template-columns: minmax(0, 1fr); }
  .etq-dica { grid-column: auto; }
  .etq-grade { min-height: 300px; }
  .etq-tabela { min-width: 760px; }
  .etq-rodape { position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; margin: 10px -12px 0; }
  .etq-rodape-dir { flex: 1; justify-content: flex-end; }
  .etq-rodape-rotulo { display: none; }

  /* novo layout no celular: tudo em coluna */
  .lay-cabeca { flex-wrap: wrap; align-items: flex-start; }
  .lay-barra { flex-wrap: wrap; }
  .lay-nome { flex: 1; width: auto; min-width: 0; }
  .lay-resumo { order: 5; flex-basis: 100%; white-space: normal; }
  .lay-area { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lay-tela { min-height: 300px; }
  .lay-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lay-linhas-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topo { padding: 0 12px; height: 67px; gap: 8px; }
  .topo-divisor, .topo-titulo, .topo-usuario, .rotulo-botao { display: none; }
  .topo-acoes { gap: 0; }
  .topo-acoes .btn-sm { padding: 0 8px; }
  .conteudo { padding: 24px 16px 48px; }
  .cabecalho-pagina h1, .boas-vindas h1 { font-size: 24px; }
  .indicadores { gap: 10px; }
  .indicador { padding: 14px 16px; }
  .indicador-valor { font-size: 24px; }
  .barra-ferramentas { padding: 14px 16px; }
  .busca { max-width: none; }

  /* tabela vira lista de cartoes */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td { padding: 2px 0; border: 0; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ': '; color: var(--texto-3); font-size: 12.5px; }
  .tabela .cel-nome { padding-right: 120px; }
  .tabela .col-acoes { position: absolute; top: 10px; right: 8px; width: auto; }
  .tabela td.cel-status { margin-top: 6px; }
  .cel-banco { max-width: none; white-space: normal; }

  .grade-2 { grid-template-columns: 1fr; }
  .gaveta-topo, .gaveta-rodape { padding-left: 16px; padding-right: 16px; }
  .gaveta-corpo { padding: 4px 16px 28px; }
  .gaveta-rodape .btn { flex: 1; }
  .modal-acoes { flex-direction: column-reverse; }
  .modal-acoes .btn { width: 100%; }
  .avisos-rapidos { right: 16px; bottom: 16px; }
  .pagina-etiqueta .avisos-rapidos { bottom: 150px; }

  .painel-topo { padding: 16px 16px 0; }
  .painel-produto { font-size: 28px; }
  .painel-loja { font-size: 13px; }
  .painel-conteudo { padding: 24px 16px 40px; }
  .grupo-titulo { font-size: 22px; }
}

/* =========================================================
   ACESSO (senha provisoria e verificacao em duas etapas) e SEGURANCA (central)
   ========================================================= */
.acesso-passo { font-size: 16px; font-weight: 500; color: var(--texto); }
.acesso-texto { font-size: 14px; color: var(--texto-2); }
.acesso-qr-caixa { display: grid; justify-items: center; gap: 8px; text-align: center; }
/* o QR sai do servidor em PNG: pixelado para continuar nitido quando a tela reduz */
.acesso-qr {
  width: 246px; height: 246px; max-width: 100%;
  image-rendering: pixelated; border: 1px solid var(--borda); border-radius: var(--raio-md); background: #fff;
}
.acesso-segredo {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; word-break: break-all; color: var(--texto);
}
.acesso-codigos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px;
  margin: 0; padding: 16px 16px 16px 36px; border-radius: var(--raio-md); background: var(--superficie-2);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em;
}
.acesso-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acesso-rodape p { flex: 1; min-width: 180px; }

.tabela.sem-clique tbody tr { cursor: default; }
.seg-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-select { width: auto; height: 40px; }
.seg-papel { display: block; color: var(--texto-3); font-size: 12.5px; }
.seg-quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg-detalhe { color: var(--texto-2); font-size: 13.5px; word-break: break-word; }
.seg-rodape { padding: 12px 20px 16px; border-top: 1px solid var(--borda); }

@media (max-width: 900px) {
  .acesso-codigos { grid-template-columns: 1fr; }
  .seg-filtros { width: 100%; }
  .seg-filtros .busca { max-width: none; }
}

/* ---------- VPN da loja (ficha da farmacia) ---------- */
.cel-vpn { white-space: nowrap; }
.vpn-chave { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13.5px; }
.vpn-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.vpn-dados dt { font-size: 12.5px; color: var(--texto-3); }
.vpn-dados dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.vpn-rotulo { margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--texto); }
.vpn-bloco {
  margin: 0 0 6px; padding: 12px 14px; overflow-x: auto;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-md);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; line-height: 1.55;
  white-space: pre; color: var(--texto);
}
.vpn-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Configuracoes ---------- */
.cfg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; margin-top: 20px; }
.cfg-cartao { padding: 20px 22px 22px; }
.cfg-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-espaco { margin-top: 16px; }
.cfg-chave-servidor { display: flex; align-items: center; gap: 8px; }
.cfg-chave-servidor code {
  flex: 1; min-width: 0; padding: 8px 10px; overflow-wrap: anywhere;
  background: var(--superficie-2); border-radius: var(--raio-sm);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px;
}

/* ---------- Ajuda ---------- */
.ajuda { max-width: 860px; }
.ajuda-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ajuda-cartao { margin-top: 20px; padding: 22px 26px 24px; }
.ajuda-cartao h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 10px; }
.ajuda-numero {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-primaria); color: var(--texto-inverso); font-size: 14px; font-weight: 700;
}
.ajuda-cartao p, .ajuda-cartao li { font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.ajuda-cartao p + p, .ajuda-cartao p + ol, .ajuda-cartao p + ul, .ajuda-cartao ol + p, .ajuda-cartao ul + p { margin-top: 10px; }
.ajuda-cartao ol, .ajuda-cartao ul { padding-left: 22px; display: grid; gap: 6px; }
.ajuda-cartao code {
  padding: 1px 6px; border-radius: 4px; background: var(--superficie-2);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px;
}
.ajuda-bloco {
  margin: 12px 0 0; padding: 12px 14px; overflow-x: auto;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-md);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre;
}
.ajuda-opcional { margin-left: 6px; }
.ajuda-tabela { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.ajuda-tabela th, .ajuda-tabela td { padding: 10px 12px; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.ajuda-tabela th { color: var(--texto-2); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 900px) {
  .vpn-dados, .cfg-grade { grid-template-columns: minmax(0, 1fr); }
  .ajuda-cartao { padding: 18px 18px 20px; }
}