/*
 * Editor de imagem da Pet Zone (web/src/scripts/editorImagem.js). FONTE ÚNICA: este arquivo; o Pet Zone Pro serve
 * uma cópia idêntica em src/PetZone.Partner/wwwroot/css/editor-imagem.css (npm run copiar:editor no web/).
 * As cores repetem web/src/styles/tokens.css (o Pro não tem as variáveis do Tailwind 4); o teste
 * EditorImagemCopiaTests confere que cada uma existe lá.
 */
.pz-ed {
  --pz-ed-petroleo: #0F4C5C;
  --pz-ed-profundo: #0A2F38;
  --pz-ed-tangerina: #FF8A3D;
  --pz-ed-creme: #FFF6EC;
  --pz-ed-alerta: #B42318;
  --pz-ed-alerta-fundo: #FDECEA;
  --pz-ed-fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pz-ed-titulo: "Outfit", "Segoe UI", system-ui, sans-serif;

  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--pz-ed-profundo);
  color: var(--pz-ed-creme);
  font-family: var(--pz-ed-fonte);
  font-size: 15px;
  line-height: 1.4;
  overscroll-behavior: contain;
}
.pz-ed *, .pz-ed *::before, .pz-ed *::after { box-sizing: border-box; }
.pz-ed::backdrop { background: rgba(6, 25, 30, 0.72); }
html.pz-ed-aberto, html.pz-ed-aberto body { overflow: hidden; }

.pz-ed-caixa {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "topo" "palco" "painel" "rodape";
  height: 100%;
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) {
  .pz-ed {
    width: min(1180px, calc(100vw - 48px));
    height: min(820px, calc(100dvh - 48px));
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  }
  .pz-ed-caixa {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo topo" "palco painel" "rodape rodape";
    padding: 0;
  }
  .pz-ed-painel { border-left: 1px solid rgba(255, 246, 236, 0.1); overflow-y: auto; }
}

/* topo */
.pz-ed-topo { grid-area: topo; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid rgba(255, 246, 236, 0.1); }
.pz-ed-titulos { flex: 1; min-width: 0; }
.pz-ed-titulo { margin: 0; font-family: var(--pz-ed-titulo); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--pz-ed-creme); }
.pz-ed-contador { margin: 2px 0 0; font-size: 13px; color: rgba(255, 246, 236, 0.7); }
.pz-ed-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--pz-ed-creme); cursor: pointer;
}
.pz-ed-icone:hover { background: rgba(255, 246, 236, 0.1); }

/* palco com a foto */
.pz-ed-palco {
  grid-area: palco; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 220px; padding: 16px; background: rgba(0, 0, 0, 0.35); user-select: none; -webkit-user-select: none;
}
.pz-ed-estado { margin: 0; max-width: 420px; padding: 0 16px; text-align: center; color: rgba(255, 246, 236, 0.8); }
.pz-ed-estado-erro { color: var(--pz-ed-creme); font-weight: 600; }
.pz-ed-area { position: relative; flex: none; }
.pz-ed-canvas { display: block; width: 100%; height: 100%; }

.pz-ed-corte {
  position: absolute; outline: none; cursor: move; touch-action: none;
  box-shadow: 0 0 0 9999px rgba(6, 25, 30, 0.62);
  border: 2px solid var(--pz-ed-creme);
}
.pz-ed-corte:focus-visible { border-color: var(--pz-ed-tangerina); }
.pz-ed-corte.pz-ed-circulo { box-shadow: none; }
.pz-ed-corte.pz-ed-circulo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6, 25, 30, 0.62); border: 1px dashed rgba(255, 246, 236, 0.7);
}
.pz-ed-grade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.15s;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 246, 236, 0.55) calc(33.333% - 0.5px), rgba(255, 246, 236, 0.55) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px), rgba(255, 246, 236, 0.55) calc(66.666% - 0.5px), rgba(255, 246, 236, 0.55) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 246, 236, 0.55) calc(33.333% - 0.5px), rgba(255, 246, 236, 0.55) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px), rgba(255, 246, 236, 0.55) calc(66.666% - 0.5px), rgba(255, 246, 236, 0.55) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
.pz-ed-arrastando .pz-ed-grade, .pz-ed-corte:focus-visible .pz-ed-grade { opacity: 1; }

/* alças: a área de toque (32 px) é maior que o desenho */
.pz-ed-alca { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; touch-action: none; }
.pz-ed-alca::after { content: ""; position: absolute; left: 9px; top: 9px; width: 14px; height: 14px; border-radius: 3px; background: var(--pz-ed-creme); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.pz-ed-alca[data-alca="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.pz-ed-alca[data-alca="n"] { left: 50%; top: 0; cursor: ns-resize; }
.pz-ed-alca[data-alca="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.pz-ed-alca[data-alca="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.pz-ed-alca[data-alca="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.pz-ed-alca[data-alca="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.pz-ed-alca[data-alca="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.pz-ed-alca[data-alca="w"] { left: 0; top: 50%; cursor: ew-resize; }
.pz-ed-alca[data-alca="n"]::after, .pz-ed-alca[data-alca="s"]::after { left: 6px; top: 13px; width: 20px; height: 6px; }
.pz-ed-alca[data-alca="e"]::after, .pz-ed-alca[data-alca="w"]::after { left: 13px; top: 6px; width: 6px; height: 20px; }
/* proporção travada: só os cantos */
.pz-ed-travado .pz-ed-alca[data-alca="n"], .pz-ed-travado .pz-ed-alca[data-alca="s"],
.pz-ed-travado .pz-ed-alca[data-alca="e"], .pz-ed-travado .pz-ed-alca[data-alca="w"] { display: none; }

/* painel de ferramentas */
.pz-ed-painel { grid-area: painel; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; max-height: 44vh; overflow-y: auto; }
.pz-ed-abas { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 246, 236, 0.08); }
.pz-ed-aba {
  flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 246, 236, 0.8);
  font: inherit; font-weight: 600; cursor: pointer;
}
.pz-ed-aba[aria-selected="true"] { background: var(--pz-ed-creme); color: var(--pz-ed-profundo); }
.pz-ed-grupo { display: flex; flex-direction: column; gap: 14px; }
.pz-ed-grupo[hidden], .pz-ed [hidden] { display: none !important; }
.pz-ed-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-ed-chip {
  min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 246, 236, 0.3); border-radius: 999px;
  background: transparent; color: var(--pz-ed-creme); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pz-ed-chip[aria-checked="true"] { background: var(--pz-ed-tangerina); border-color: var(--pz-ed-tangerina); color: var(--pz-ed-profundo); }
.pz-ed-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pz-ed-botao {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px;
  border: 0; border-radius: 12px; background: rgba(255, 246, 236, 0.08); color: var(--pz-ed-creme);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
}
.pz-ed-botao:hover, .pz-ed-chip:hover { background-color: rgba(255, 246, 236, 0.16); }
.pz-ed-chip[aria-checked="true"]:hover { background-color: var(--pz-ed-tangerina); }
.pz-ed-botao:focus-visible, .pz-ed-chip:focus-visible, .pz-ed-aba:focus-visible, .pz-ed-icone:focus-visible,
.pz-ed-primario:focus-visible, .pz-ed-secundario:focus-visible { outline: 3px solid var(--pz-ed-tangerina); outline-offset: 2px; }

.pz-ed-deslizante, .pz-ed-legenda { display: flex; flex-direction: column; gap: 6px; }
.pz-ed-rotulo { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgba(255, 246, 236, 0.85); }
.pz-ed-rotulo output { font-variant-numeric: tabular-nums; color: var(--pz-ed-creme); }
.pz-ed input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--pz-ed-tangerina); touch-action: pan-y; }
.pz-ed-legenda input {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255, 246, 236, 0.3); border-radius: 10px;
  background: rgba(255, 246, 236, 0.06); color: var(--pz-ed-creme); font: inherit;
}
.pz-ed-legenda input::placeholder { color: rgba(255, 246, 236, 0.5); }
.pz-ed-legenda input:focus { outline: 2px solid var(--pz-ed-tangerina); outline-offset: 1px; }
.pz-ed-dica { margin: 0; font-size: 13px; color: rgba(255, 246, 236, 0.7); }
.pz-ed-erro { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--pz-ed-alerta-fundo); color: var(--pz-ed-alerta); font-size: 14px; font-weight: 600; }

/* rodapé */
.pz-ed-rodape { grid-area: rodape; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(255, 246, 236, 0.1); }
.pz-ed-medida { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 246, 236, 0.7); font-variant-numeric: tabular-nums; }
.pz-ed-primario, .pz-ed-secundario {
  min-height: 46px; padding: 0 20px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pz-ed-primario { border: 0; background: var(--pz-ed-tangerina); color: var(--pz-ed-profundo); }
.pz-ed-primario:disabled { opacity: 0.5; cursor: not-allowed; }
.pz-ed-secundario { border: 1px solid rgba(255, 246, 236, 0.35); background: transparent; color: var(--pz-ed-creme); }
@media (max-width: 420px) {
  .pz-ed-medida { display: none; }
  .pz-ed-primario, .pz-ed-secundario { flex: 1; padding: 0 12px; }
}

/* prévia ao lado do campo (modo declarativo) */
.pz-ed-previas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pz-ed-previa { position: relative; margin: 0; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #F2EFEA; border: 1px solid #E6E0D6; }
.pz-ed-previa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-ed-previa-arquivo { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px; font-size: 11px; text-align: center; word-break: break-all; color: #4A5559; }
.pz-ed-previa-editar {
  position: absolute; left: 4px; right: 4px; bottom: 4px; min-height: 28px; border: 0; border-radius: 8px;
  background: rgba(10, 47, 56, 0.85); color: #FFF6EC; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.pz-ed-previa-editar:focus-visible { outline: 2px solid #FF8A3D; outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) { .pz-ed-grade { transition: none; } }

/* ───────── zona de envio (todo input de arquivo; ver ligarZonaEnvio no editorImagem.js) ─────────
 * Classe dobrada para passar na frente de ".campo label" e ".campo input" das telas. */
.pz-zona-bloco { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pz-zona.pz-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 132px; padding: 20px 18px; border: 2px dashed #E6E0D6; border-radius: 18px; background: #FFF6EC;
  color: #4A5559; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 400;
  line-height: 1.35; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pz-zona.pz-zona:hover, .pz-zona.pz-zona.arrastando { border-color: #FF8A3D; background: #F2EFEA; }
.pz-zona.pz-zona.pz-zona-cheia { border-style: solid; border-color: #0F4C5C; }
.pz-zona.pz-zona.pz-zona-recusou { border-color: #B42318; background: #FDECEA; }
.pz-zona-bloco:has(.pz-zona-input:focus-visible) .pz-zona { outline: 2px solid #0F4C5C; outline-offset: 2px; }
.pz-zona-icone { width: 34px; height: 34px; color: #0F4C5C; flex-shrink: 0; }
.pz-zona-titulo { font-family: "Outfit", "Segoe UI", system-ui, sans-serif; font-size: 16px; font-weight: 600; color: #0A2F38; }
.pz-zona-link { color: #B04B0B; text-decoration: underline; }
.pz-zona-dica { font-size: 12px; color: #666C6F; }
.pz-zona-escolhido { font-size: 13px; font-weight: 600; color: #1E7A4C; word-break: break-all; }
.pz-zona-escolhido[hidden] { display: none; }
.pz-zona.pz-zona.pz-zona-compacta {
  flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; min-height: 0; padding: 10px 14px;
  border-radius: 12px; text-align: left;
}
.pz-zona-compacta .pz-zona-icone { width: 22px; height: 22px; }
.pz-zona-compacta .pz-zona-titulo { font-size: 14px; }
.pz-zona-input.pz-zona-input {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; min-width: 0; padding: 0; margin: 0; border: 0;
  opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.pz-zona-bloco:has(.pz-zona-input:disabled) .pz-zona { opacity: .55; cursor: not-allowed; }