/* =====================================================================
   PAINEL DE CHECKOUT — estilos
   Sem framework, sem CDN. Um arquivo, carregado do próprio domínio:
   nada de terceiro entra na tela onde você digita senha.
   ===================================================================== */

:root {
  --tinta:        #17222b;
  --tinta-fraca:  #5c6b78;
  --tinta-tenue:  #8b98a4;
  --fundo:        #eceef0;
  --carta:        #ffffff;
  --linha:        #d5dade;
  --acento:       #0d5c4a;   /* verde profundo — confirmar, receber */
  --acento-claro: #e7f1ee;
  --alerta:       #9c2b1c;
  --alerta-claro: #fbeae7;
  --aviso-claro:  #fdf5e0;
  --aviso-linha:  #e0cb92;
  --raio:         3px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- acesso */

.acesso {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
}

.cartao {
  width: 100%;
  max-width: 396px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 34px 32px 30px;
}

.cartao.largo { max-width: 520px; }

.marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin: 0 0 22px;
}

.cartao h1 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin: 0 0 6px;
}

.cartao .apoio {
  margin: 0 0 24px;
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------- campos */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 6px;
}

input[type=email], input[type=password], input[type=text] {
  width: 100%;
  padding: 11px 12px;
  font: 15px/1.3 var(--fonte);
  color: var(--tinta);
  background: #fbfcfc;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color .12s, background .12s;
}

input:focus {
  outline: none;
  border-color: var(--acento);
  background: #fff;
  box-shadow: 0 0 0 3px var(--acento-claro);
}

.campo { margin-bottom: 18px; }

/* Entrada do código de 6 dígitos.
   Monospace e espaçamento largo: dígito alinhado é mais fácil de conferir
   contra a tela do celular, que é exatamente o que a pessoa está fazendo. */
.codigo {
  font-family: var(--mono) !important;
  font-size: 27px !important;
  letter-spacing: .34em;
  text-align: center;
  padding: 14px 8px 14px 18px !important;
  font-variant-numeric: tabular-nums;
}

.contador {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--tinta-tenue);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- botões */

button, .botao {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font: 600 14.5px/1.2 var(--fonte);
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: filter .12s;
}

button:hover, .botao:hover { filter: brightness(1.14); }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.secundario {
  background: none;
  color: var(--tinta-fraca);
  border-color: transparent;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 0 0;
  width: auto;
  margin: 0 auto;
}
.secundario:hover { color: var(--acento); filter: none; text-decoration: underline; }

.rodape-form { margin-top: 14px; text-align: center; }

/* ---------------------------------------------------------------- avisos */

.erro, .aviso, .ok {
  padding: 11px 13px;
  border-radius: var(--raio);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
  border: 1px solid;
}

.erro  { background: var(--alerta-claro); border-color: #e8bfb8; color: var(--alerta); }
.aviso { background: var(--aviso-claro);  border-color: var(--aviso-linha); color: #6d5715; }
.ok    { background: var(--acento-claro); border-color: #b6d3cb; color: var(--acento); }

.aviso strong { display: block; margin-bottom: 3px; }

/* -------------------------------------------------- chave do autenticador */

.passos { margin: 0 0 22px; padding: 0 0 0 20px; font-size: 14px; color: var(--tinta-fraca); }
.passos li { margin-bottom: 9px; }
.passos strong { color: var(--tinta); font-weight: 600; }

.chave {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .09em;
  word-break: break-all;
  background: #f5f7f8;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 15px;
  margin: 0 0 6px;
  text-align: center;
  user-select: all;   /* um clique seleciona tudo */
}

.dica { font-size: 12px; color: var(--tinta-tenue); margin: 0 0 22px; text-align: center; }

/* --------------------------------------------- códigos de recuperação */

.lista-codigos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 20px;
  padding: 16px;
  background: #f5f7f8;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.lista-codigos span {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
  padding: 5px 0;
  user-select: all;
}

/* ---------------------------------------------------------------- painel */

.topo {
  background: var(--carta);
  border-bottom: 1px solid var(--linha);
  padding: 0 22px;
}

.topo-interno {
  max-width: 1080px;
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topo .marca { margin: 0; }

.topo form { margin: 0; }
.topo button {
  width: auto;
  padding: 7px 13px;
  font-size: 13px;
  background: none;
  color: var(--tinta-fraca);
  border-color: var(--linha);
}
.topo button:hover { color: var(--alerta); border-color: #e8bfb8; filter: none; }

.conteudo { max-width: 1080px; margin: 0 auto; padding: 30px 22px 60px; }

.conteudo h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.2px; }
.conteudo .apoio { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 26px; }

.painel-vazio {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 34px 30px;
}

.painel-vazio h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.painel-vazio p  { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 8px; max-width: 62ch; }
.painel-vazio ul { color: var(--tinta-fraca); font-size: 14px; margin: 12px 0 0; padding-left: 20px; }
.painel-vazio li { margin-bottom: 6px; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 460px) {
  .cartao { padding: 26px 20px 24px; border-left: none; border-right: none; }
  .lista-codigos { grid-template-columns: 1fr; }
  .codigo { font-size: 23px !important; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =====================================================================
   PRODUTOS
   ===================================================================== */

.nav { display: flex; gap: 4px; margin-left: 26px; flex: 1; }

.nav a {
  font-size: 13.5px;
  color: var(--tinta-fraca);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--raio);
}
.nav a:hover { color: var(--tinta); background: #f4f6f7; }
.nav a.aqui  { color: var(--acento); background: var(--acento-claro); font-weight: 600; }

.conteudo.estreito { max-width: 720px; }

.cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
}
.cabeca h1 { margin-bottom: 4px; }
.cabeca .apoio { margin: 0; }

.botao.acao { width: auto; padding: 10px 17px; font-size: 14px; white-space: nowrap; }

.trilha { font-size: 13px; color: var(--tinta-tenue); margin: 0 0 8px; }
.trilha a { color: var(--tinta-fraca); text-decoration: none; }
.trilha a:hover { color: var(--acento); text-decoration: underline; }

.nota { font-size: 13.5px; color: var(--tinta-fraca); margin: 18px 0 0; }

/* ------------------------------------------------------------ cartões */

.cartoes { display: flex; gap: 14px; margin: 0 0 26px; flex-wrap: wrap; }

.cartao-num {
  flex: 1 1 180px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px;
  text-decoration: none;
  display: block;
}
a.cartao-num:hover { border-color: var(--acento); }

.cartao-num .num {
  display: block;
  font-size: 30px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cartao-num .rot {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 5px;
}

/* ------------------------------------------------------------- listagem */

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

.linha {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.linha.inativa { opacity: .62; }

.linha-corpo { min-width: 0; }
.linha-corpo h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 3px; }
.linha-corpo h2 a { color: var(--tinta); text-decoration: none; }
.linha-corpo h2 a:hover { color: var(--acento); text-decoration: underline; }
.linha-corpo .apoio { font-size: 13.5px; margin: 0 0 6px; }

.selo {
  display: inline-block; margin-left: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-fraca); background: #eef0f1;
  border: 1px solid var(--linha); border-radius: 2px;
  padding: 2px 6px; vertical-align: 2px;
}

.meta { margin: 0; font-size: 12.5px; color: var(--tinta-tenue); display: flex; gap: 14px; flex-wrap: wrap; }
.alerta-inline { color: var(--alerta); font-weight: 600; }

.linha-acoes { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.linha-acoes form { margin: 0; }

.secundario-cx {
  width: auto; padding: 7px 13px; font-size: 13px; font-weight: 500;
  background: none; color: var(--tinta-fraca);
  border: 1px solid var(--linha); border-radius: var(--raio);
  text-decoration: none; display: inline-block; cursor: pointer;
}
.secundario-cx:hover { color: var(--acento); border-color: var(--acento); filter: none; }
.secundario-cx.perigo:hover { color: var(--alerta); border-color: #e8bfb8; }

/* --------------------------------------------------------------- blocos */

.bloco {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 24px 26px;
  margin: 0 0 18px;
}
.bloco h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.bloco > .apoio { font-size: 13.5px; margin: 0 0 18px; }
.bloco form { margin: 0; }
.bloco button { width: auto; padding: 10px 18px; }

textarea {
  width: 100%;
  padding: 11px 12px;
  font: 14px/1.6 var(--mono);
  color: var(--tinta);
  background: #fbfcfc;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  resize: vertical;
}
textarea:focus {
  outline: none; border-color: var(--acento); background: #fff;
  box-shadow: 0 0 0 3px var(--acento-claro);
}

.ajuda { font-size: 12.5px; color: var(--tinta-tenue); margin: 6px 0 0; line-height: 1.55; }
.ajuda code {
  font-family: var(--mono); font-size: 11.5px;
  background: #f1f3f4; border: 1px solid var(--linha); border-radius: 2px;
  padding: 1px 4px;
}

/* --------------------------------------------------------------- envio */

.envio {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--linha); border-radius: 0;
  margin-top: 18px !important;
}
.envio input[type=file] { flex: 1 1 240px; font-size: 13px; color: var(--tinta-fraca); }
.envio input[type=file]::file-selector-button {
  font: 500 13px var(--fonte); padding: 8px 13px; margin-right: 11px;
  color: var(--tinta-fraca); background: #f4f6f7;
  border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer;
}
.envio input[type=file]::file-selector-button:hover { color: var(--acento); border-color: var(--acento); }

/* ------------------------------------------------------------ arquivos */

.arquivos { list-style: none; margin: 0; padding: 0; }
.arquivos li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.arquivos li:last-child { border-bottom: none; }
.arquivos .nome { display: block; font-size: 14px; font-weight: 500; word-break: break-all; }
.arquivos .detalhe {
  display: block; font-size: 12px; color: var(--tinta-tenue);
  margin-top: 3px; font-family: var(--mono);
}
.arquivos form { margin: 0; flex-shrink: 0; }

/* -------------------------------------------------------------- galeria */

.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin: 0 0 4px;
}
.galeria figure {
  margin: 0; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; background: #f7f8f9;
}
.galeria img { display: block; width: 100%; height: 118px; object-fit: cover; }
.galeria figcaption {
  font-size: 11.5px; color: var(--tinta-tenue); font-family: var(--mono);
  padding: 6px 9px 0; text-align: center;
}
.galeria form { margin: 0; padding: 6px 9px 9px; }
.galeria .secundario-cx { width: 100%; padding: 5px; font-size: 12px; }

/* --------------------------------------------------------------- prévia */

.previa {
  border: 1px solid var(--linha); border-left: 3px solid var(--acento);
  border-radius: 0; background: #fbfcfc; padding: 18px 20px;
  font-size: 14.5px; line-height: 1.65;
}
.previa h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.previa h3:first-child { margin-top: 0; }
.previa p  { margin: 0 0 11px; }
.previa p:last-child, .previa ul:last-child, .previa ol:last-child { margin-bottom: 0; }
.previa ul, .previa ol { margin: 0 0 11px; padding-left: 22px; }
.previa li { margin-bottom: 5px; }
.previa a { color: var(--acento); }

@media (max-width: 560px) {
  .nav { margin-left: 12px; }
  .cabeca { flex-direction: column; }
  .linha { flex-direction: column; align-items: stretch; }
  .linha-acoes { justify-content: flex-start; }
  .topo-interno { height: auto; padding: 12px 0; flex-wrap: wrap; }
}

/* =====================================================================
   CHECKOUTS
   ===================================================================== */

select {
  width: 100%;
  padding: 11px 12px;
  font: 15px/1.3 var(--fonte);
  color: var(--tinta);
  background: #fbfcfc;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235c6b78' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
select:focus {
  outline: none; border-color: var(--acento); background-color: #fff;
  box-shadow: 0 0 0 3px var(--acento-claro);
}

input[type=number] {
  width: 100%; padding: 11px 12px; font: 15px/1.3 var(--fonte);
  color: var(--tinta); background: #fbfcfc;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
input[type=number]:focus {
  outline: none; border-color: var(--acento); background: #fff;
  box-shadow: 0 0 0 3px var(--acento-claro);
}

/* ------------------------------------------------- campo com prefixo */

.prefixado { display: flex; align-items: stretch; }
.prefixado span {
  display: flex; align-items: center;
  padding: 0 11px;
  font-size: 14px; color: var(--tinta-fraca);
  background: #f1f3f4;
  border: 1px solid var(--linha); border-right: none;
  border-radius: var(--raio) 0 0 var(--raio);
  white-space: nowrap;
}
.prefixado input { border-radius: 0 var(--raio) var(--raio) 0 !important; }
.prefixado.longo span { font-size: 12px; font-family: var(--mono); }

@media (max-width: 620px) {
  .prefixado.longo { flex-direction: column; }
  .prefixado.longo span {
    border-right: 1px solid var(--linha); border-bottom: none;
    border-radius: var(--raio) var(--raio) 0 0; padding: 8px 11px;
  }
  .prefixado.longo input { border-radius: 0 0 var(--raio) var(--raio) !important; }
}

/* -------------------------------------------------------- marcadores */

.marcador {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; margin: 0 0 8px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: #fbfcfc; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400;
  color: var(--tinta);
}
.marcador:hover { border-color: var(--acento); }
.marcador:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.marcador input { margin: 2px 0 0; accent-color: var(--acento); width: 15px; height: 15px; flex-shrink: 0; }
.marcador span { display: block; }
.marcador strong { display: block; font-weight: 600; font-size: 14px; }
.marcador em {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--tinta-fraca); margin-top: 2px;
}
.marcador.solto { margin-bottom: 0; }

.dupla { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.dupla .campo { flex: 1 1 200px; }

.opcional {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--tinta-tenue); font-size: 11px;
}

/* --------------------------------------------------------- o link */

.bloco.destaque { border-left: 3px solid var(--acento); border-radius: 0; }

.link-linha { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; }
.link-linha.grande { margin: 0; }

.link-campo {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  font: 13px/1.3 var(--mono);
  color: var(--tinta);
  background: #f5f7f8;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: text;
}
.link-linha.grande .link-campo { font-size: 14px; padding: 12px 13px; }
.link-campo:focus { outline: none; border-color: var(--acento); background: #fff; }

.preco {
  margin: 0 0 4px;
  font-size: 17px; font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.ok-inline { color: var(--acento); font-weight: 600; }

.aviso div { margin-top: 3px; }

/* =====================================================================
   PEDIDOS
   ===================================================================== */

.tabela-caixa {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow-x: auto;
}

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tabela th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-tenue);
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: #fafbfb; }

.tabela .mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.tabela .sub-td {
  display: block; font-size: 12px; color: var(--tinta-tenue); margin-top: 2px;
}

.est {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid; white-space: nowrap;
}
.est-iniciado             { color: var(--tinta-fraca); background: #f0f2f3; border-color: var(--linha); }
.est-aguardando_pagamento { color: #6d5715; background: var(--aviso-claro); border-color: var(--aviso-linha); }
.est-em_analise           { color: #6d5715; background: var(--aviso-claro); border-color: var(--aviso-linha); }
.est-pago                 { color: var(--acento); background: var(--acento-claro); border-color: #b6d3cb; }
.est-recusado,
.est-cancelado,
.est-estornado            { color: var(--alerta); background: var(--alerta-claro); border-color: #e8bfb8; }
.est-expirado             { color: var(--tinta-tenue); background: #f0f2f3; border-color: var(--linha); }

/* ------------------------------------------------------ detalhe do pedido */

.kv { display: flex; flex-direction: column; gap: 1px; background: var(--linha);
      border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.kv > div { display: flex; justify-content: space-between; gap: 16px;
            background: var(--carta); padding: 10px 14px; font-size: 13.5px; }
.kv span { color: var(--tinta-fraca); flex-shrink: 0; }
.kv strong { font-weight: 600; text-align: right; word-break: break-word; }
.mono-p { font-family: var(--mono); font-size: 12px; font-weight: 400 !important; }

.acoes-linha { display: flex; gap: 9px; flex-wrap: wrap; }
.acoes-linha form { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; padding: 10px 0;
               border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.timeline li:last-child { border-bottom: none; }
.timeline .quando { font-family: var(--mono); font-size: 12px; color: var(--tinta-tenue);
                    flex-shrink: 0; padding-top: 1px; }
.timeline .oq strong { font-weight: 600; }
.timeline .oq em { font-style: normal; font-size: 11.5px; color: var(--tinta-tenue);
                   border: 1px solid var(--linha); border-radius: 2px; padding: 1px 5px;
                   margin-left: 6px; }

@media (max-width: 520px) {
  .kv > div { flex-direction: column; gap: 2px; }
  .kv strong { text-align: left; }
  .timeline li { flex-direction: column; gap: 3px; }
}

/* ------------------------------------------------------------ checklist */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.checklist li:last-child { border-bottom: none; }

.checklist .marca {
  flex-shrink: 0; width: 18px; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.5;
}
.checklist .feito .marca    { color: var(--acento); }
.checklist .falta .marca    { color: var(--alerta); }
.checklist .opcional .marca { color: var(--tinta-tenue); }

.checklist .txt strong { display: block; font-size: 14px; font-weight: 500; }
.checklist .feito .txt strong { color: var(--tinta-fraca); }
.checklist .falta .txt strong { color: var(--tinta); font-weight: 600; }
.checklist .txt em {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--tinta-fraca); margin-top: 2px; max-width: 68ch;
}

.lista-falta { list-style: none; margin: 0; padding: 0; }
.lista-falta li { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.lista-falta li:last-child { border-bottom: none; }
.lista-falta strong { display: block; font-size: 14px; font-weight: 600; }
.lista-falta em {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--tinta-fraca); margin-top: 2px; max-width: 68ch;
}

pre.bruto {
  font: 12px/1.5 var(--mono);
  background: #f5f7f8;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin: 6px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tinta-fraca);
  max-height: 240px;
}

/* ------------------------------------------------------------ ambientes */

.ambientes { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }

.amb {
  flex: 1 1 200px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  background: #fbfcfc;
}
.amb.atual { border-color: var(--acento); background: var(--acento-claro); }

.amb h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 9px; }
.amb h3 em {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--acento); border: 1px solid #b6d3cb; border-radius: 2px;
  padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}

.amb ul { list-style: none; margin: 0; padding: 0; }
.amb li { font-size: 12.5px; padding: 3px 0 3px 18px; position: relative; color: var(--tinta-fraca); }
.amb li::before { position: absolute; left: 0; font-weight: 700; }
.amb li.v::before { content: "✓"; color: var(--acento); }
.amb li.x::before { content: "✕"; color: var(--alerta); }
.amb li.o::before { content: "○"; color: var(--tinta-tenue); }
.amb li span { color: var(--tinta-tenue); }

button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { filter: none; }

/* ------------------------------------------------------------- avançado */

details.avancado {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0 14px;
  margin: 0 0 18px;
  background: #fbfcfc;
}
details.avancado summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta-fraca);
  padding: 11px 0;
  list-style: none;
}
details.avancado summary::-webkit-details-marker { display: none; }
details.avancado summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .12s;
  color: var(--tinta-tenue);
}
details.avancado[open] summary::before { content: "▾ "; }
details.avancado summary:hover { color: var(--acento); }
details.avancado[open] { padding-bottom: 4px; }
details.avancado .campo:last-of-type { margin-bottom: 14px; }

/* --------------------------------------------------------------- marca */

.marca-logo { display: flex; align-items: center; text-decoration: none; }
.marca-logo img { display: block; width: auto; max-width: 220px; object-fit: contain; }

.marca-acesso { margin: 0 0 22px; text-align: left; }
.marca-acesso img { display: block; width: auto; max-width: 200px; object-fit: contain; }

.previa-marca {
  display: flex; align-items: center; gap: 14px;
  background: #f5f7f8; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px; margin: 0 0 16px;
}
.previa-marca img { display: block; width: auto; max-width: 200px; object-fit: contain; }
.previa-marca .sem { font-size: 12.5px; color: var(--tinta-tenue); }

/* ---------------------------------------------------------- relatórios */

.atalhos {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--linha);
}
.atalhos a {
  font-size: 13px; color: var(--tinta-fraca); text-decoration: none;
  padding: 7px 13px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--carta);
}
.atalhos a:hover { border-color: var(--acento); color: var(--acento); }
.atalhos a.aqui { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

.atalhos .periodo { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; }
.atalhos .periodo span { font-size: 12.5px; color: var(--tinta-tenue); }
.atalhos .periodo input[type=date] {
  padding: 6px 9px; font: 13px var(--fonte); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--carta);
}
.atalhos .periodo button { padding: 7px 13px; }

.cartao-num.destaque-num { border-color: var(--acento); background: var(--acento-claro); }
.cartao-num.destaque-num .num { color: var(--acento); font-size: 25px; }
.cartao-num .rot small { display: block; font-size: 11px; color: var(--tinta-tenue); margin-top: 2px; }

.linha-secundaria {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-fraca);
  margin: -12px 0 24px;
}

.grafico {
  display: flex; align-items: flex-end; gap: 2px;
  height: 160px; padding: 0 0 4px;
  border-bottom: 1px solid var(--linha);
}
.grafico .barra { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.grafico .barra span {
  display: block; width: 100%; background: var(--acento);
  border-radius: 1px 1px 0 0; transition: opacity .12s;
}
.grafico .barra span.vazia { background: var(--linha); }
.grafico .barra:hover span { opacity: .7; }

@media (max-width: 640px) {
  .atalhos .periodo { margin: 8px 0 0; width: 100%; }
  .grafico { height: 120px; }
}