/*
  dicode.ai — CSS só da página Marca d'água em imagem (/marca-dagua-imagem).
  Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de
  1px, rótulos em Fragment Mono, laranja sempre com texto preto, alvos de toque de 44 px.
  Tela: assets/js/ferramentas/telas/marca-dagua-imagem.js; opções: templates/ferramentas/marca-dagua-imagem.html.
*/

/* Fonte manuscrita da marca (a mesma do Assinar PDF, já no site): só baixa quando é escolhida. */
@font-face { font-family: 'dc-mdi-manuscrita'; font-display: swap; src: url(../../fonts/dancing-script-latin-ext.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'dc-mdi-manuscrita'; font-display: swap; src: url(../../fonts/dancing-script-latin.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Prévia e opções: no celular, a prévia vem antes; no computador, fica ao lado e acompanha a rolagem. */
.mdi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.mdi-opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
@media (min-width: 900px) {
  .mdi { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .mdi-previa { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  .mdi-opcoes { grid-column: 1; grid-row: 1; }
}
.mdi-bloco { display: grid; gap: 16px; min-width: 0; }
.mdi-campo { max-width: 460px; }
.mdi-texto { resize: vertical; min-height: 76px; font-family: inherit; }
.mdi-copyright { justify-self: start; align-self: flex-start; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mdi-estilo { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* Os nomes das fontes já aparecem com a cara delas (a manuscrita só depois de carregada). */
.mdi-fonte--serifa { font-family: Georgia, 'Times New Roman', 'Liberation Serif', 'DejaVu Serif', serif; }
.mdi-fonte--manuscrita { font-family: 'dc-mdi-manuscrita', cursive; font-size: 18px; }

/* Prévia: caixa de altura fixa desde o começo (nada pula quando a miniatura chega). */
.mdi-previa { display: grid; gap: 8px; min-width: 0; }
.mdi-previa-caixa {
  position: relative;
  height: 260px;
  border: 1px solid var(--linha);
  /* Xadrez claro: a parte transparente de um PNG aparece como transparente */
  background-color: var(--superficie);
  background-image: linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%),
    linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
}
@media (min-width: 900px) { .mdi-previa-caixa { height: 380px; } }
.mdi-previa-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mdi-previa-espera {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px; text-align: center; color: var(--cinza); background: var(--superficie);
}
/* Legenda: altura fixa de 3 linhas desde o começo; o que passar é cortado com reticências. */
.mdi-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. */
.mdi-cor-amostra { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--preto); }
.mdi-cor-amostra--branco { background: #FFFFFF; }
.mdi-cor-amostra--preto { background: #0A0A0A; }
.mdi-cor-amostra--cinza { background: #808080; }
.mdi-cor-amostra--vermelho { background: #C71220; }
.mdi-cor-amostra--azul { background: #174AA6; }
.mdi-cor-campo { max-width: 260px; }
.mdi-cor-entrada {
  width: 96px; height: 44px; padding: 4px; border: 1px solid var(--preto); border-radius: 0; background: var(--branco); cursor: pointer;
}
.mdi-cor-entrada::-webkit-color-swatch-wrapper { padding: 0; }
.mdi-cor-entrada::-webkit-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.mdi-cor-entrada::-moz-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.mdi-cor-entrada:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

/* Logo */
.mdi-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.mdi-logo-info { margin: 0; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.mdi-logo-info:empty { display: none; }

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

/* Réguas (tamanho, transparência, ângulo, margem) */
.mdi-reguas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 620px; }
.mdi-regua-rotulo { display: flex; justify-content: space-between; gap: 12px; }
.mdi-regua-rotulo output { font-family: var(--fonte-mono); color: var(--preto); }
.mdi-faixa { width: 100%; min-height: 44px; margin: 0; accent-color: var(--preto); cursor: pointer; }
.mdi-faixa:disabled { cursor: not-allowed; opacity: .5; }
.mdi-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.mdi-atalhos .botao { min-height: 44px; min-width: 56px; padding: 8px 12px; justify-content: center; font-family: var(--fonte-mono); }
.mdi-atalhos .botao[aria-pressed="true"] { background: var(--preto); color: var(--branco); }

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

/* Na lista (várias fotos): o botão que põe a foto na prévia */
.mdi-ver { min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mdi-ver[aria-pressed="true"] { text-decoration: none; color: var(--cinza); cursor: default; }
.mdi-ver[aria-pressed="true"]::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--laranja); vertical-align: 1px; }

/* ---------- Resultado: prévia das imagens prontas ---------- */
.mdi-previas { display: grid; gap: 10px; min-width: 0; }
.mdi-previas > .rotulo { margin: 0; }
.mdi-previas-lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mdi-previas--uma .mdi-previas-lista { grid-template-columns: minmax(0, 280px); }
.mdi-previa-item { display: grid; gap: 6px; min-width: 0; }
.mdi-previa-quadro { position: relative; aspect-ratio: 1; background: var(--superficie); outline: 1px solid var(--linha); overflow: hidden; }
.mdi-previa-quadro img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.mdi-previa-nome { overflow-wrap: anywhere; }

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

/* Com uma foto só, ela já é a da prévia: sem o botão "Ver na prévia" */
#ferramenta[data-mdi-modo="um"] .mdi-ver { display: none; }

/* Só no app instalado (pwa/foto-tela.js, molde_app): a prévia (data-app-palco) ocupa o meio da tela,
   sobre o escuro, sem o título nem o xadrez em volta (a foto já vem desenhada no canvas). */
.ft .mdi-previa[data-app-palco] {
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  padding: 8px 0 44px; background: #1A1A1A; position: static;
}
.ft .mdi-previa > .rotulo:first-child { display: none; }
.ft .mdi-previa-caixa { flex: 1 1 auto; min-height: 0; height: auto; border: 0; background: transparent; }
.ft .mdi-previa-espera { background: transparent; color: #D6D6D2; }
.ft .mdi-previa-legenda { order: -1; height: auto; padding: 0 12px; color: #D6D6D2; font-size: 12px; -webkit-line-clamp: 1; }
.ft .mdi-reguas { gap: 12px; }
.ft .mdi-opcoes, .ft .mdi-bloco { gap: 14px; }