/* dicode.ai — CSS só da página Marca d'água (/marca-dagua).
   Tela: assets/js/ferramentas/telas/marca-dagua.js; opções: templates/ferramentas/marca-dagua.html. */

/* Prévia e opções: no celular, a prévia vem antes; no computador, fica ao lado e acompanha a rolagem. */
.mdg { display: grid; gap: 24px; min-width: 0; }
.md-opcoes { display: grid; gap: 24px; min-width: 0; }
@media (min-width: 900px) {
  .mdg { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .md-previa { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  .md-opcoes { grid-column: 1; grid-row: 1; }
}
.md-bloco { display: grid; gap: 16px; min-width: 0; }
.md-bloco[hidden], .md-campo[hidden] { display: none; }
.md-campo { max-width: 420px; }
.mdg .opcao:has(input:disabled) { color: var(--cinza); cursor: not-allowed; }
.md-outro { resize: vertical; min-height: 76px; font-family: inherit; }
.md-linha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); max-width: 560px; }

/* Prévia: caixa de altura fixa desde o começo (nada pula quando a miniatura chega). */
.md-previa { display: grid; gap: 8px; min-width: 0; }
.md-previa-caixa {
  position: relative;
  height: 260px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  overflow: hidden;
}
@media (min-width: 900px) { .md-previa-caixa { height: 380px; } }
.md-previa-svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.md-previa-espera {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px; text-align: center; color: var(--cinza);
}
.md-previa-espera[hidden] { display: none; }
.md-previa-fundo { fill: var(--branco); }
.md-previa-borda { fill: none; stroke: var(--preto); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* A letra da prévia imita a do PDF (Helvetica, Times ou Courier); a largura de cada linha é a do
   PDF (textLength), então só o desenho das letras muda um pouco de um aparelho para outro. */
.md-previa-texto { font-family: Helvetica, Arial, 'Liberation Sans', 'Nimbus Sans', sans-serif; font-weight: 400; font-style: normal; }
.md-previa-texto.md-letra--serifa { font-family: 'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman', serif; }
.md-previa-texto.md-letra--maquina { font-family: 'Courier New', Courier, 'Liberation Mono', 'Nimbus Mono PS', monospace; }
.md-previa-texto.md-letra--negrito { font-weight: 700; }
.md-previa-texto.md-letra--italico { font-style: italic; }
/* Por baixo: "multiplicar" deixa o texto escuro da página por cima da marca (aproximação). */
.md-marcas--baixo { mix-blend-mode: multiply; }
/* Legenda: altura fixa de 3 linhas desde o começo (em 320 px, "Página 1 de “nome.pdf”..." ocupa
   3); o que passar disso é cortado com reticências (o texto inteiro continua para o leitor de tela). */
.md-previa-legenda {
  margin: 0; color: var(--cinza); overflow-wrap: anywhere; line-height: 1.5; height: 4.5em; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}

/* Cores do texto: um quadrado da cor dentro do botão. */
.md-cor-amostra { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--preto); }
.md-cor-amostra--cinza { background: #808080; }
.md-cor-amostra--vermelho { background: #C71220; }
.md-cor-amostra--azul { background: #174AA6; }
.md-cor-amostra--preto { background: #0A0A0A; }

/* Letra: os nomes já aparecem com a cara delas (fontes do aparelho, nada é baixado). */
.md-letra--serifa { font-family: 'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman', serif; }
/* Só no nome da opção (a serifada parece menor): o <text> da prévia usa a mesma classe e o tamanho dele vem da conta. */
.escolha .md-letra--serifa { font-size: 17px; }
.md-letra--maquina { font-family: 'Courier New', Courier, 'Liberation Mono', 'Nimbus Mono PS', monospace; }
.md-estilo { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* Posição: uma grade 3 x 3 que imita a página (cada quadrado é um lugar) e Diagonal e Mosaico ao lado. */
.md-posicoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; min-width: 0; }
.md-grade { display: grid; flex: none; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); border: 1px solid var(--preto); background: var(--branco); }
.md-lugar { position: relative; display: block; cursor: pointer; }
.md-lugar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.md-lugar span { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.md-lugar span::before { content: ''; width: 12px; height: 12px; border: 1px solid var(--cinza); background: var(--branco); }
.md-lugar input:checked + span { background: var(--preto); }
.md-lugar input:checked + span::before { border-color: var(--laranja); background: var(--laranja); }
.md-lugar input:focus-visible + span { outline: 2px solid var(--laranja); outline-offset: -4px; }
.md-lugar:hover input:not(:checked) + span::before { border-color: var(--preto); }
.md-posicoes-outras { flex: 1 1 200px; min-width: 0; }

/* Ângulo: régua e atalhos */
.md-regua { max-width: 420px; }
.md-regua-rotulo { display: flex; justify-content: space-between; gap: 12px; }
.md-regua-rotulo output { font-family: var(--fonte-mono); color: var(--preto); }
.md-faixa { width: 100%; min-height: 44px; margin: 0; accent-color: var(--preto); cursor: pointer; }
.md-faixa:disabled { cursor: not-allowed; opacity: .5; }
.md-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.md-atalhos .botao { min-height: 44px; min-width: 56px; padding: 8px 12px; justify-content: center; font-family: var(--fonte-mono); }
.md-atalhos .botao[aria-pressed="true"] { background: var(--preto); color: var(--branco); }
.md-atalhos .botao:disabled { opacity: .5; cursor: not-allowed; }

/* Imagem da marca */
.md-imagem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.md-imagem-info { margin: 0; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.md-imagem-info:empty { display: none; }

@media (max-width: 640px) {
  .md-opcoes .escolha { flex: 1 1 130px; }
  .md-opcoes .escolha span { width: 100%; justify-content: center; }
}

/* Resultado: a primeira página com a marca, desenhada do PDF pronto. */
.md-resultado { display: grid; gap: 8px; justify-items: start; margin: 0; }
.md-resultado-img { display: block; width: auto; max-width: min(100%, 240px); height: auto; border: 1px solid var(--preto); background: var(--branco); }
.md-resultado figcaption { color: var(--cinza); overflow-wrap: anywhere; }

/* "Ficaram de fora" (tela "pronto", telas/girar-excluir-lote.js): igual a Girar PDF. */
.lote-fora { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); }
.lote-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.lote-fora li { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.lote-fora li::before { content: ''; grid-row: 1; width: 7px; height: 7px; background: var(--laranja); }
.lote-fora-nome { font-weight: 600; overflow-wrap: anywhere; text-decoration: line-through; text-decoration-thickness: 1px; }
.lote-fora-motivo { grid-column: 2; overflow-wrap: anywhere; }