/* Painel Loja Externa — identidade visual da Zini Alimentos (tokens do site zeta2.com.br).
   Fontes servidas pelo próprio sistema (licença SIL OFL, ver ../fontes/). */

@font-face {
  font-family: "Montserrat";
  src: url("../fontes/montserrat-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fontes/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --zini-primary: #006b5e;
  --zini-primary-container: #51c1af;
  --zini-secondary: #3e655f;
  --zini-secondary-container: #bee8e0;
  --zini-tertiary: #c0001f;
  --zini-dark: #0d1f1c;
  --zini-on-primary: #ffffff;
  --zini-on-surface: #1b1c1c;
  --zini-on-surface-variant: #3d4946;
  --zini-outline-variant: #bcc9c5;
  --zini-surface: #faf9f9;
  --zini-surface-lowest: #ffffff;
  --zini-surface-low: #f5f3f3;
  --zini-surface-container: #efeded;
  --zini-surface-high: #e9e8e8;
  --zini-gradient-primary: linear-gradient(135deg, #006b5e, #51c1af);
  --zini-radius: 16px;
  --zini-radius-sm: 10px;
  --zini-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --zini-shadow-float: 0 16px 48px rgba(0, 0, 0, 0.08);
  --zini-font-head: "Montserrat", system-ui, sans-serif;
  --zini-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --foco: 0 0 0 3px rgba(81, 193, 175, 0.55);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--zini-font-body);
  color: var(--zini-on-surface);
  background: var(--zini-surface);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--zini-font-head); color: var(--zini-dark); line-height: 1.2; }
h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
a { color: var(--zini-primary); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }

/* ---------- formulários e botões ---------- */
.formulario { display: grid; gap: 0.5rem; margin-top: 1rem; }
.formulario label { font-weight: 600; font-size: 0.9rem; color: var(--zini-on-surface-variant); }
.formulario input {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--zini-outline-variant);
  border-radius: var(--zini-radius-sm);
  background: var(--zini-surface-lowest);
}
.formulario input:focus { border-color: var(--zini-primary); box-shadow: var(--foco); outline: none; }
.botao {
  font: 600 1rem var(--zini-font-head);
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
}
.botao-principal {
  margin-top: 0.75rem;
  color: var(--zini-on-primary);
  background: var(--zini-gradient-primary);
  box-shadow: 0 0 0 rgba(0, 107, 94, 0);
  transition: box-shadow 0.2s;
}
.botao-principal:hover { box-shadow: 0 0 20px rgba(0, 107, 94, 0.4); }
.botao-discreto { background: transparent; color: inherit; border: 1px solid currentColor; padding: 0.4rem 1rem; }

.aviso {
  padding: 0.75rem 1rem;
  border-radius: var(--zini-radius-sm);
  background: var(--zini-secondary-container);
  color: var(--zini-dark);
}
.aviso-erro { background: #fde8eb; color: var(--zini-tertiary); font-weight: 600; }
.nota { color: var(--zini-on-surface-variant); font-size: 0.875rem; }

/* ---------- telas públicas (entrar e Google Authenticator) ---------- */
body.publica {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(81, 193, 175, 0.25), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(0, 107, 94, 0.18), transparent 40%),
    var(--zini-surface);
}
.cartao-publico {
  width: min(440px, 100%);
  background: var(--zini-surface-lowest);
  border-radius: var(--zini-radius);
  box-shadow: var(--zini-shadow-float);
  padding: 2rem;
}
.cartao-publico .logo { display: block; width: 200px; height: auto; margin: 0 auto 0.5rem; }
.sobretitulo {
  text-align: center;
  font: 700 0.8rem var(--zini-font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zini-primary);
  margin: 0 0 1.5rem;
}
.passos { padding-left: 1.2rem; color: var(--zini-on-surface-variant); }
.qr { margin: 1rem auto; display: flex; justify-content: center; }
.qr svg { width: 220px; height: 220px; background: #fff; border-radius: var(--zini-radius-sm); }
.chave-manual summary { cursor: pointer; color: var(--zini-primary); font-weight: 600; }
.chave { font: 700 1.05rem ui-monospace, monospace; letter-spacing: 0.08em; word-break: break-all; }

/* ---------- telas internas ---------- */
.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem 1rem; z-index: 10; }
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.5rem;
  background: var(--zini-dark);
  color: #fff;
}
.topo-marca { display: flex; align-items: center; gap: 0.75rem; color: #fff; text-decoration: none; }
.topo-marca img { width: 130px; height: auto; }
.topo-marca span {
  font: 700 0.85rem var(--zini-font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zini-primary-container);
}
.topo-usuario { display: flex; align-items: center; gap: 1rem; }
.topo-usuario form { margin: 0; }

.moldura { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 62px); }
.menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 0.75rem;
  background: var(--zini-surface-lowest);
  border-right: 1px solid var(--zini-surface-high);
}
.menu a {
  padding: 0.65rem 0.9rem;
  border-radius: var(--zini-radius-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--zini-on-surface-variant);
}
.menu a:hover { background: var(--zini-surface-low); }
.menu a.ativo { background: var(--zini-secondary-container); color: var(--zini-dark); }

.conteudo { padding: 2rem; max-width: 1200px; }
.subtitulo { color: var(--zini-on-surface-variant); margin-top: 0; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cartao {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  border-radius: var(--zini-radius);
  background: var(--zini-surface-lowest);
  box-shadow: var(--zini-shadow-card);
  text-decoration: none;
  color: var(--zini-on-surface);
  border-left: 6px solid var(--zini-outline-variant);
  transition: transform 0.15s;
}
.cartao:hover { transform: translateY(-2px); }
.cartao-destaque { border-left-color: var(--zini-primary); }
.cartao-alerta { border-left-color: var(--zini-tertiary); }
.cartao-valor { font: 800 2rem var(--zini-font-head); color: var(--zini-dark); }
.cartao-titulo { font-weight: 600; color: var(--zini-on-surface-variant); }

.bloco {
  background: var(--zini-surface-lowest);
  border-radius: var(--zini-radius);
  box-shadow: var(--zini-shadow-card);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}
.tabela { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.tabela th {
  text-align: left;
  font: 700 0.75rem var(--zini-font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zini-on-surface-variant);
  padding: 0.5rem;
  border-bottom: 2px solid var(--zini-surface-high);
}
.tabela td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--zini-surface-container); }

@media (max-width: 760px) {
  .moldura { grid-template-columns: 1fr; }
  .menu { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--zini-surface-high); }
  .menu a { white-space: nowrap; }
  .topo-marca span { display: none; }
  .conteudo { padding: 1.25rem; }
}

/* ---------- Etapa 2: listas, formulários e detalhes ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: ui-monospace, monospace; }
.direita { text-align: right; }
.trilha { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--zini-on-surface-variant); }
.trilha a { text-decoration: none; }
.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.barra h1 { margin: 0 0 0.25rem; }
.botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.botoes form { margin: 0; }
a.botao { display: inline-block; text-decoration: none; }
.barra .botao-principal, .botoes .botao-principal { margin-top: 0; }
.botao-secundario { background: var(--zini-surface-lowest); color: var(--zini-primary); border: 1px solid var(--zini-primary); padding: 0.6rem 1.1rem; }
.botao-secundario:hover { background: var(--zini-secondary-container); }
.botao-perigo { color: #fff; background: var(--zini-tertiary); }
.botao-perigo-contorno { background: var(--zini-surface-lowest); color: var(--zini-tertiary); border: 1px solid var(--zini-tertiary); padding: 0.6rem 1.1rem; }
.link-perigo { font: inherit; background: none; border: 0; color: var(--zini-tertiary); cursor: pointer; text-decoration: underline; padding: 0; }
td form { margin: 0; }

.mensagens { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.aviso-ok { background: #e3f5ef; color: var(--zini-primary); font-weight: 600; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filtros input, .filtros select, .campo input, .campo select, .campo textarea {
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--zini-outline-variant);
  border-radius: var(--zini-radius-sm);
  background: var(--zini-surface-lowest);
  color: var(--zini-on-surface);
}
.filtros input[type="search"] { min-width: min(320px, 100%); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus {
  border-color: var(--zini-primary); box-shadow: var(--foco); outline: none;
}

.formulario-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 1.25rem; }
.formulario-grade .aviso, .acoes-formulario { grid-column: 1 / -1; }
.acoes-formulario { display: flex; gap: 0.75rem; align-items: center; }
.acoes-formulario .botao-principal { margin-top: 0; }
.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo label { font-weight: 600; font-size: 0.875rem; color: var(--zini-on-surface-variant); }
.campo textarea { min-height: 5rem; }
.campo-marcar { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.campo-marcar input { width: 1.1rem; height: 1.1rem; accent-color: var(--zini-primary); }
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea { border-color: var(--zini-tertiary); }
.erro-campo { margin: 0; color: var(--zini-tertiary); font-size: 0.85rem; font-weight: 600; }
.formulario-linha { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--zini-outline-variant); }
.formulario-linha .campo { min-width: 140px; }
.formulario-linha .nota { max-width: 220px; }

.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1.5rem; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; }
.dados dt { font-weight: 600; color: var(--zini-on-surface-variant); }
.dados dd { margin: 0; }
.lista-simples { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: 0.9rem; }

.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font: 700 0.75rem var(--zini-font-head);
  letter-spacing: 0.03em;
  background: var(--zini-surface-high);
  color: var(--zini-on-surface-variant);
}
.etiqueta-ativa, .etiqueta-aprovado { background: var(--zini-secondary-container); color: var(--zini-primary); }
.etiqueta-aguardando_homologacao, .etiqueta-pendente { background: #fff1d6; color: #7a4b00; }
.etiqueta-suspensa, .etiqueta-revogado { background: #fde8eb; color: var(--zini-tertiary); }
.etiqueta-encerrada { background: var(--zini-dark); color: #fff; }

.destaque-codigo { text-align: center; max-width: 560px; }
.codigo-ativacao { font: 800 2.2rem ui-monospace, monospace; letter-spacing: 0.12em; color: var(--zini-dark); margin: 0.75rem 0; word-break: break-all; }

@media (max-width: 760px) {
  .dados { grid-template-columns: 1fr; }
  .dados dd { margin-bottom: 0.5rem; }
}

/* ---------- Etapa 4: auditoria e conta ---------- */
.topo-conta { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.5); }
.topo-conta:hover { border-bottom-style: solid; }
.filtros-auditoria select { max-width: 260px; }
.json {
  margin: 0;
  padding: 1rem;
  border-radius: var(--zini-radius-sm);
  background: var(--zini-surface-low);
  font: 0.875rem/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.etiqueta-enviado { background: var(--zini-secondary-container); color: var(--zini-primary); }
.etiqueta-processando { background: #e3eefb; color: #174a8a; }
.etiqueta-erro_temporario { background: #fff1d6; color: #7a4b00; }
.etiqueta-erro_negocio { background: #fde8eb; color: var(--zini-tertiary); }