/* pdfhoje — estética de terminal herdada da TUI Textual.
   Paleta derivada do tema real da TUI: superfícies azul-escuras,
   bordas sólidas e acento ciano (o mesmo dos "▶ Página N" do log). */

:root {
  --fundo: #0f1419;
  --painel: #16212b;
  --borda: #33465a;
  --texto: #d8e0e8;
  --texto-fraco: #7a8b9c;
  --acento: #4fc3f7;
  --ok: #5fd068;
  --erro: #ff6b6b;
  --aviso: #ffd166;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Fira Code",
    "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

/* Barra de título — como o Header do Textual */
.barra-titulo {
  background: var(--painel);
  color: var(--acento);
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--borda);
  letter-spacing: 0.06em;
}

/* Rodapé de "atalhos" — como o Footer do Textual */
.barra-rodape {
  background: var(--painel);
  border-top: 1px solid var(--borda);
  padding: 0.4rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-size: 0.85em;
  color: var(--texto-fraco);
}
.barra-rodape b { color: var(--acento); font-weight: bold; }
.barra-rodape .dir { margin-left: auto; }

/* Coluna central mais larga (o conteúdo respira melhor que os 72ch antigos) */
.terminal {
  width: min(96ch, 100% - 3rem);
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  flex: 1;
}

/* Assinatura visual: painéis como caixas de terminal, título na borda
   (fieldset/legend = o ┌─ Título ─┐ do ncurses, nativo do HTML) */
fieldset.caixa {
  border: 1px solid var(--borda);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.5rem;
  background: transparent;
}
fieldset.caixa > legend {
  color: var(--acento);
  font-weight: bold;
  padding: 0 0.6ch;
}

h1, h2 { font-size: 1em; margin: 0 0 1rem; }

a { color: var(--acento); }
a:hover { background: var(--acento); color: var(--fundo); text-decoration: none; }

p { margin: 0.5rem 0; }
.fraco { color: var(--texto-fraco); }
.ok { color: var(--ok); }
.erro { color: var(--erro); }
.aviso { color: var(--aviso); }

/* Formulários */
label { display: block; margin: 0.75rem 0 0.2rem; color: var(--texto-fraco); }
input[type="email"], input[type="password"], input[type="text"],
input[type="number"], select {
  width: 100%;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto);
  font: inherit;
  padding: 0.45rem 0.6rem;
}
input:focus, select:focus, button:focus, a:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
input[type="file"] { color: var(--texto-fraco); margin-top: 0.3rem; width: 100%; }

button {
  background: var(--painel);
  border: 1px solid var(--acento);
  color: var(--acento);
  font: inherit;
  font-weight: bold;
  padding: 0.5rem 1.2rem;
  margin-top: 1rem;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--acento); color: var(--fundo); }
button:disabled { border-color: var(--borda); color: var(--texto-fraco); cursor: wait; }

/* Botão secundário/destrutivo (ex.: cancelar cobrança) */
button.secundario { border-color: var(--borda); color: var(--texto-fraco); }
button.secundario:hover:not(:disabled) {
  background: var(--erro);
  border-color: var(--erro);
  color: var(--fundo);
}

/* Modal (overlay escurecido + caixa de terminal centralizada) */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal-fundo[hidden] { display: none; }
.modal-caixa { width: min(52ch, 100%); }
.modal-caixa fieldset.caixa { margin: 0; background: var(--painel); }

/* Overlay de arrastar-e-soltar global (solte um PDF em qualquer lugar) */
.dnd-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 20, 25, 0.88);
  /* impede que os elementos por baixo capturem o drag durante o overlay */
  pointer-events: none;
}
.dnd-overlay[hidden] { display: none; }
.dnd-caixa {
  border: 2px dashed var(--acento);
  border-radius: 4px;
  background: var(--painel);
  padding: 2rem 3rem;
  text-align: center;
  max-width: 90vw;
}
.dnd-icone {
  font-size: 2.6rem;
  color: var(--acento);
  line-height: 1;
  margin-bottom: 0.6rem;
}
#dnd-texto {
  color: var(--acento);
  font-weight: bold;
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}
.dnd-caixa p { margin: 0; }
/* Estado de erro (arquivo não-PDF ou falha no envio) */
.dnd-overlay.erro .dnd-caixa { border-color: var(--erro); }
.dnd-overlay.erro .dnd-icone,
.dnd-overlay.erro #dnd-texto { color: var(--erro); }

/* Tabela de jobs */
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--borda);
  font-size: 0.9em;
}
th { color: var(--texto-fraco); font-weight: normal; }
td.num { text-align: right; }

/* Badges de download por formato na lista de jobs */
.arquivo {
  display: inline-block;
  border: 1px solid var(--borda);
  color: var(--acento);
  padding: 0.02rem 0.4rem;
  margin-right: 0.15rem;
  font-size: 0.82em;
  text-decoration: none;
}
.arquivo:hover {
  background: var(--acento);
  color: var(--fundo);
  border-color: var(--acento);
}

/* Barra de progresso ASCII (preenchida via JS com █ e ░) */
.progresso-ascii {
  font-size: 1.1em;
  letter-spacing: 0.05em;
  color: var(--acento);
  white-space: pre;
}

/* Mensagens de status/erro de formulário */
.mensagem { margin-top: 0.75rem; min-height: 1.4em; }

/* Indicador de carregamento (ex.: verificando cobrança pendente) */
.carregando { color: var(--texto-fraco); }
@media (prefers-reduced-motion: no-preference) {
  .carregando { animation: pulsar 1.2s ease-in-out infinite; }
  @keyframes pulsar { 50% { opacity: 0.4; } }
}

/* QR Code do PIX (PNG base64): fundo branco para leitura no tema escuro */
.pix-qr {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid var(--borda);
  padding: 0.5rem;
  margin: 0.5rem 0;
}

/* Código PIX copia-e-cola */
.pix-codigo {
  word-break: break-all;
  background: var(--fundo);
  border: 1px dashed var(--borda);
  padding: 0.75rem;
  font-size: 0.8em;
  color: var(--texto-fraco);
  user-select: all;
}

/* Preview da seleção: um chip por segmento contíguo, com miniaturas */
.segmentos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
  min-height: 2rem;
}
.segmento {
  border: 1px solid var(--borda);
  padding: 0.5rem 0.6rem 0.35rem;
  text-align: center;
  position: relative;
}
.segmento .miniaturas { display: flex; align-items: center; gap: 0.4rem; }
.segmento img {
  width: 84px;
  border: 1px solid var(--borda);
  background: #fff;
  min-height: 40px;
}
.segmento .seta { color: var(--acento); font-weight: bold; }
.segmento figcaption { font-size: 0.78em; color: var(--texto-fraco); margin-top: 0.25rem; }
.segmento .remover {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--erro);
  font: inherit;
  font-size: 0.8em;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  margin: 0;
  cursor: pointer;
}
.segmento .remover:hover { background: var(--erro); color: var(--fundo); border-color: var(--erro); }

/* Seletor de páginas: pickers contextuais + texto */
.linha-slider { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.linha-slider input[type="range"] { flex: 1; accent-color: var(--acento); }
.linha-adicionar { display: flex; gap: 0.6rem; align-items: stretch; }
.linha-adicionar button { margin-top: 0; white-space: nowrap; }
button.tipo-adicao { border-color: var(--borda); color: var(--texto); font-weight: normal; }
button.tipo-adicao[aria-pressed="true"] {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--painel);
  font-weight: bold;
}
/* Garante contraste no hover do botão pressionado (texto escuro no ciano) */
button.tipo-adicao[aria-pressed="true"]:hover {
  background: var(--acento);
  color: var(--fundo);
}
.picker {
  border: 1px dashed var(--borda);
  padding: 0.75rem 1rem;
  margin-top: 0.6rem;
}
.picker-preview { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; }
.picker-preview .seta { color: var(--acento); font-weight: bold; }
.picker-preview button { margin-top: 0; margin-left: auto; }
.thumb-picker { margin: 0; text-align: center; }
.thumb-picker img {
  width: 100px;
  border: 1px solid var(--borda);
  background: #fff;
  min-height: 50px;
}
.thumb-picker figcaption { font-size: 0.78em; color: var(--texto-fraco); margin-top: 0.2rem; }
#pick-numero { min-width: 4ch; text-align: right; font-weight: bold; }
#custo-estimado { font-size: 0.95em; }

/* Wizard: escolha de escopo (documento inteiro / partes) */
.escopo-opcoes { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0; }
.escopo {
  flex: 1;
  min-width: 14rem;
  text-align: left;
  padding: 0.9rem 1rem;
  margin-top: 0;
  border-color: var(--borda);
  color: var(--texto);
  font-weight: normal;
}
.escopo b { display: block; color: var(--acento); margin-bottom: 0.2rem; }
.escopo .fraco { font-size: 0.85em; }
.escopo:hover:not(:disabled) {
  background: var(--painel);
  color: var(--texto);
  border-color: var(--acento);
}

/* Duas colunas no desktop (entrar | criar conta) */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .duas-colunas { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  /* Cursor de terminal piscando no título da página inicial */
  .cursor::after { content: "▮"; color: var(--acento); animation: piscar 1.1s step-end infinite; }
  @keyframes piscar { 50% { opacity: 0; } }
}