/* =============================================================================
   pedido-arte.css — PEDIDO DE ARTE PERSONALIZADA (25/10/2026, pedido do CW)
   Aba "Pedir arte" da área do cliente, banner "Quer uma arte do seu jeito?" e, no futuro, a página
   pública /arte-personalizada/. Usa os tokens do base.css (verde Janete). O JS é o
   assets/js/componentes/pedido-arte.js.
   ============================================================================= */

.pa-escondido { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
[hidden].pa-aviso, .pa-form [hidden], .pa-meus[hidden], .pa-banner[hidden] { display: none !important; }

/* ---------- textos soltos ---------- */
.pa-intro { margin: 0 0 var(--espaco-4); color: var(--cor-texto-suave); font-size: var(--texto-md); line-height: 1.5; }
.pa-restantes { margin: 0 0 var(--espaco-4); padding: var(--espaco-2) var(--espaco-3); background: #ecfdf5; color: #065f46;
    border: 1px solid #a7f3d0; border-radius: var(--raio-md); font-size: var(--texto-sm); }
.pa-form--cheio .pa-restantes { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.pa-form--cheio .pa-form__corpo { display: none; }

/* ---------- formulário ---------- */
.pa-form { max-width: 760px; }
.pa-campo { margin: 0 0 var(--espaco-5); }
.pa-campo__rotulo { display: block; margin: 0 0 var(--espaco-2); font-weight: 700; color: var(--cor-texto); font-size: var(--texto-md); }
.pa-campo__rotulo small { font-weight: 400; color: var(--cor-texto-suave); }
.pa-obrig { color: var(--cor-alerta); }
.pa-campo__ajuda { margin: var(--espaco-2) 0 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: 1.4; }
.pa-contador { float: right; color: var(--cor-texto-fraco); }
.pa-texto { display: block; width: 100%; min-height: 140px; padding: var(--espaco-3); border: 2px solid var(--cor-borda-forte);
    border-radius: var(--raio-md); font: inherit; font-size: var(--texto-md); line-height: 1.5; color: var(--cor-texto);
    background: #fff; resize: vertical; box-sizing: border-box; }
.pa-texto:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px rgba(0, 138, 32, .18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca, #008a20) 18%, transparent); }

/* ---------- botões (independentes do .cw-btn: o formulário também vai para a página pública) ---------- */
.pa-botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); padding: 11px 18px;
    border: 2px solid transparent; border-radius: var(--raio-md); font: inherit; font-weight: 700; font-size: var(--texto-md);
    line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, transform .1s ease; }
.pa-botao:active { transform: translateY(1px); }
.pa-botao:focus-visible, .pa-aceite__caixa input:focus-visible, .pa-foto__x:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 2px; }
.pa-anexar:has(.pa-escondido:focus-visible) label.pa-botao { outline: 3px solid var(--cor-marca); outline-offset: 2px; }
.pa-botao--principal { background: var(--cor-marca); color: #fff; padding: 14px 24px; font-size: var(--texto-lg); }
.pa-botao--principal:hover { background: var(--cor-marca-escura); }
.pa-botao--principal[disabled] { opacity: .55; cursor: not-allowed; }
.pa-botao--claro { background: #fff; color: var(--cor-marca); border-color: var(--cor-marca); }
.pa-botao--claro:hover { background: var(--cor-marca); color: #fff; }
.pa-botao--parar { background: var(--cor-alerta); color: #fff; }
.pa-botao--parar:hover { background: #b91c1c; }
.pa-botao--sm { padding: 7px 12px; font-size: var(--texto-sm); }
.pa-anexar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); }

/* ---------- fotos ---------- */
.pa-fotos, .pa-audios { list-style: none; margin: var(--espaco-3) 0 0; padding: 0; }
.pa-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--espaco-3); }
.pa-foto { position: relative; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); overflow: hidden; background: var(--cor-fundo-suave); }
.pa-foto__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; font-size: 2rem; color: var(--cor-texto-fraco); }
.pa-foto__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-foto__nome { display: block; padding: 4px 6px; font-size: var(--texto-xs); color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-foto__x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .75);
    color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.pa-foto__x:hover { background: var(--cor-alerta); }

/* ---------- áudios ---------- */
.pa-cronometro { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cor-alerta); }
.pa-cronometro::before { content: "● "; animation: pa-pisca 1s steps(2, start) infinite; }
@keyframes pa-pisca { to { visibility: hidden; } }
.pa-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); padding: var(--espaco-2) var(--espaco-3);
    margin: 0 0 var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-fundo-suave); }
.pa-audio__nome { flex: 1 1 140px; min-width: 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-audio > .pa-player { flex: 2 1 280px; }
.pa-audio__apagar { margin-left: auto; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--cor-alerta);
    font-family: inherit; font-size: var(--texto-sm); font-weight: 600; line-height: 1; cursor: pointer; }
.pa-audio__apagar:hover { background: color-mix(in srgb, var(--cor-alerta) 10%, transparent); }
.pa-audio__apagar:focus-visible { outline: 2px solid var(--cor-alerta); outline-offset: 2px; }

/* ── Reprodutor de áudio (26/10/2026): botão redondo + barra + tempo, nas cores do site ── */
.pa-player { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 16px 6px 6px; border: 1px solid var(--cor-borda);
    border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.pa-player audio { display: none; }
.pa-player__play { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
    background: var(--cor-marca); color: #fff; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.pa-player__play svg { width: 18px; height: 18px; fill: currentColor; }
.pa-player__play:hover { background: var(--cor-marca-escura); transform: scale(1.06); }
.pa-player__play:focus-visible { outline: 3px solid var(--cor-destaque-vivo, #7c3aed); outline-offset: 2px; }
.pa-player.is-tocando .pa-player__play { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-marca) 22%, transparent); }
.pa-player__barra { flex: 1 1 auto; min-width: 60px; height: 6px; margin: 0; border-radius: 999px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: linear-gradient(to right, var(--cor-marca) var(--pa-prog, 0%), var(--cor-borda) var(--pa-prog, 0%)); }
.pa-player__barra::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff;
    background: var(--cor-marca); box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
.pa-player__barra::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 3px solid #fff; background: var(--cor-marca);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35); }
.pa-player__barra::-moz-range-track { background: transparent; }
.pa-player__barra:focus-visible { outline: 2px solid var(--cor-destaque-vivo, #7c3aed); outline-offset: 4px; }
.pa-player__tempo { flex: 0 0 auto; font-size: var(--texto-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cor-texto); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pa-player__play { transition: none; } .pa-player__play:hover { transform: none; } }

/* ---------- aceite ---------- */
.pa-aceite { margin: 0 0 var(--espaco-5); padding: var(--espaco-4); border: 2px solid #a7f3d0; border-radius: var(--raio-lg); background: #f0fdf4; }
.pa-aceite__titulo { padding: 0 var(--espaco-2); font-weight: 700; color: #065f46; }
.pa-aceite__regras { margin: 0 0 var(--espaco-3); padding-left: 1.2em; list-style: disc; color: var(--cor-texto); font-size: var(--texto-sm); line-height: 1.5; }
.pa-aceite__regras li + li { margin-top: var(--espaco-2); }
.pa-aceite__caixa { display: flex; align-items: flex-start; gap: var(--espaco-3); font-weight: 700; cursor: pointer; color: var(--cor-texto); }
.pa-aceite__caixa input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--cor-marca); }
.pa-aceite.is-erro { border-color: var(--cor-alerta); background: #fef2f2; }

/* ---------- avisos / progresso ---------- */
.pa-aviso { margin: 0 0 var(--espaco-4); padding: var(--espaco-3); border-radius: var(--raio-md); background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: 1.45; }
.pa-aviso--erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pa-acoes { margin: 0 0 var(--espaco-4); }
.pa-progresso { margin: 0 0 var(--espaco-4); }
.pa-prog { margin: 0 0 var(--espaco-2); }
.pa-prog__linha { display: flex; justify-content: space-between; gap: var(--espaco-3); font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.pa-prog__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-prog__barra { height: 8px; margin-top: 4px; border-radius: 99px; background: var(--cor-borda); overflow: hidden; }
.pa-prog__barra > i { display: block; height: 100%; width: 0; background: var(--cor-marca); transition: width .15s linear; }
.pa-prog.is-ok .pa-prog__barra > i { background: var(--cor-marca-clara); }
.pa-prog.is-erro .pa-prog__barra > i { background: var(--cor-alerta); }
.pa-retry { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-4); }
.pa-sucesso { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--espaco-4); padding: var(--espaco-4); border: 2px solid var(--cor-marca);
    border-radius: var(--raio-lg); background: #ecfdf5; color: #065f46; }
.pa-sucesso:focus { outline: 3px solid var(--cor-marca); outline-offset: 2px; }

/* ---------- desligado ---------- */
.pa-pausa { display: flex; align-items: center; gap: var(--espaco-4); padding: var(--espaco-5); margin: 0 0 var(--espaco-5);
    border: 2px dashed var(--cor-borda-forte); border-radius: var(--raio-lg); background: var(--cor-fundo-suave); }
.pa-pausa__ico { font-size: 2.2rem; line-height: 1; }
.pa-pausa p { margin: 0; color: var(--cor-texto); font-size: var(--texto-lg); line-height: 1.45; }

/* ---------- Meus pedidos ---------- */
.pa-meus { margin-top: var(--espaco-6); }
.pa-meus__titulo { margin: 0 0 var(--espaco-3); font-size: var(--texto-xl); color: var(--cor-texto); }
.pa-meus__carregando, .pa-meus__vazio { color: var(--cor-texto-suave); }
.pa-pedido { margin: 0 0 var(--espaco-4); padding: var(--espaco-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: #fff; }
.pa-pedido__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); margin: 0 0 var(--espaco-2); }
.pa-pedido__num { font-weight: 800; color: var(--cor-texto); }
.pa-pedido__data { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.pa-selo { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: var(--texto-xs); font-weight: 800; background: #e2e8f0; color: #334155; }
.pa-selo--novo { background: #dbeafe; color: #1e40af; }
.pa-selo--andamento { background: #fef3c7; color: #92400e; }
.pa-selo--aguardando { background: #ffedd5; color: #9a3412; }
.pa-selo--concluido { background: #d1fae5; color: #065f46; }
.pa-selo--recusado { background: #fee2e2; color: #991b1b; }
.pa-pedido__texto { margin: 0 0 var(--espaco-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cor-texto); font-size: var(--texto-sm); line-height: 1.5; }
.pa-pedido__texto--curto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pa-pedido__mais { margin: 0 0 var(--espaco-3); padding: 0; border: 0; background: none; color: var(--cor-marca); font: inherit; font-size: var(--texto-sm); font-weight: 700; cursor: pointer; text-decoration: underline; }
.pa-pedido__resposta { margin: 0 0 var(--espaco-3); padding: var(--espaco-3); border-left: 4px solid var(--cor-marca); border-radius: 0 var(--raio-md) var(--raio-md) 0; background: #f0fdf4; }
.pa-pedido__resposta strong { display: block; margin-bottom: 2px; color: #065f46; font-size: var(--texto-sm); }
.pa-pedido__resposta p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--texto-sm); line-height: 1.5; }
.pa-pedido__anexos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-3); }
.pa-pedido__anexos a.pa-mini { display: block; width: 72px; height: 72px; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); overflow: hidden; background: var(--cor-fundo-suave); }
.pa-pedido__anexos a.pa-mini:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 2px; }
.pa-pedido__anexos .pa-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-pedido__anexos .pa-mini--heic { display: flex; align-items: center; justify-content: center; font-size: var(--texto-xs); font-weight: 700; color: var(--cor-texto-suave); text-align: center; }
.pa-pedido__audio { flex: 1 1 100%; max-width: 420px; }
.pa-pedido__nota { margin: 0 0 var(--espaco-2); color: var(--cor-texto-fraco); font-size: var(--texto-xs); }

/* ---------- banner na área do cliente (acima de "Meus Produtos") ---------- */
.pa-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-4); margin: 0 0 var(--espaco-5); padding: var(--espaco-5);
    border-radius: var(--raio-xl); color: #fff; background: linear-gradient(120deg, var(--cor-marca-escura) 0%, var(--cor-marca) 55%, var(--cor-marca-clara) 100%);
    box-shadow: 0 6px 20px rgba(0, 107, 24, .28); }
.pa-banner__texto { flex: 1 1 320px; min-width: 0; }
.pa-banner__titulo { margin: 0 0 var(--espaco-1); font-size: var(--texto-xl); line-height: 1.2; color: #fff; }
.pa-banner__sub { margin: 0 0 var(--espaco-2); font-size: var(--texto-md); line-height: 1.4; color: #ecfdf5; }
.pa-banner__regras { margin: 0; padding-left: 1.1em; list-style: disc; font-size: var(--texto-xs); line-height: 1.4; color: #d1fae5; }
.pa-banner__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.pa-banner .pa-botao--banner { background: #fff; color: var(--cor-marca-escura); padding: 13px 22px; font-size: var(--texto-lg); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.pa-banner .pa-botao--banner:hover { background: var(--cor-atencao, #ffd500); color: #1f2937; }
.pa-banner .pa-botao--video { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.pa-banner .pa-botao--video:hover { background: rgba(255, 255, 255, .18); }
.pa-banner .pa-botao:focus-visible { outline-color: #fff; }

@media (max-width: 600px) {
    .pa-banner { padding: var(--espaco-4); }
    .pa-banner__acoes { width: 100%; }
    .pa-banner__acoes .pa-botao { flex: 1 1 100%; }
    .pa-botao--principal { width: 100%; }
    .pa-pausa { flex-direction: column; text-align: center; }
    .pa-contador { float: none; display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .pa-botao, .pa-prog__barra > i { transition: none; }
    .pa-cronometro::before { animation: none; }
}

/* ---------- CHAT do pedido (26/10/2026, pedido do CW) ----------
   Balões: cliente à direita (verde-claro), equipe à esquerda (roxo-claro). */
.pa-selo--nova { background: #ede9fe; color: #5b21b6; animation: pa-nova 1.6s ease-in-out 3; }
@keyframes pa-nova { 50% { box-shadow: 0 0 0 4px rgba(124, 58, 237, .25); } }
.pa-chat { margin: var(--espaco-3) 0 0; padding: var(--espaco-3) 0 0; border-top: 1px dashed var(--cor-borda); }
.pa-chat__titulo { margin: 0 0 var(--espaco-2); font-size: var(--texto-md); color: var(--cor-texto); }
.pa-chat__lista { display: flex; flex-direction: column; gap: var(--espaco-2); max-height: 340px; overflow-y: auto; padding: var(--espaco-2);
    border-radius: var(--raio-md); background: var(--cor-fundo-suave); overscroll-behavior: contain; }
.pa-chat__vazio { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.pa-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; border: 1px solid transparent; }
.pa-msg--cliente { align-self: flex-end; background: #dcfce7; border-color: #a7f3d0; border-bottom-right-radius: 4px; }
.pa-msg--equipe { align-self: flex-start; background: #ede9fe; border-color: #ddd6fe; border-bottom-left-radius: 4px; }
.pa-msg--nova { box-shadow: 0 0 0 2px var(--cor-destaque-vivo, #7c3aed); }
.pa-msg__quem { display: block; margin: 0 0 2px; font-size: var(--texto-xs); font-weight: 800; color: #4c1d95; }
.pa-msg--cliente .pa-msg__quem { color: #065f46; }
.pa-msg__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cor-texto); font-size: var(--texto-sm); line-height: 1.45; }
.pa-msg__quando { display: block; margin-top: 2px; text-align: right; font-size: var(--texto-xs); color: var(--cor-texto-fraco); }
.pa-chat__form { margin: var(--espaco-3) 0 0; }
.pa-chat__rotulo { display: block; margin: 0 0 var(--espaco-1); font-weight: 700; font-size: var(--texto-sm); color: var(--cor-texto); }
.pa-chat__texto { display: block; width: 100%; min-height: 56px; padding: var(--espaco-2) var(--espaco-3); border: 2px solid var(--cor-borda-forte);
    border-radius: var(--raio-md); font: inherit; font-size: var(--texto-sm); line-height: 1.45; color: var(--cor-texto); background: #fff;
    resize: vertical; box-sizing: border-box; }
.pa-chat__texto:focus { outline: none; border-color: var(--cor-marca); box-shadow: 0 0 0 3px rgba(0, 138, 32, .18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca, #008a20) 18%, transparent); }
.pa-chat__pe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); margin-top: var(--espaco-2); }
.pa-chat__cont, .pa-chat__uso { font-size: var(--texto-xs); color: var(--cor-texto-fraco); }
.pa-chat__uso { margin-right: auto; }
.pa-chat__uso.is-cheio { color: var(--cor-alerta); font-weight: 700; }
.pa-chat__erro { margin: var(--espaco-2) 0 0; }
.pa-chat__fechado { margin: var(--espaco-3) 0 0; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-md); background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.pa-chat [hidden] { display: none !important; }
@media (max-width: 600px) { .pa-msg { max-width: 94%; } .pa-chat__pe .pa-botao { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pa-selo--nova { animation: none; } }