/* Portal 0.7 — estilos do Papel de parede (Tela 21). Carregado depois de portal-ux.css. Prefixo .pp-. */
:root{
 /* Cores dadas pelo documento para esta tela (sem variável equivalente em portal-ux.css). */
 --pp-frame-a:#1c2232;
 --pp-frame-b:#121722;
 --pp-frame-line:#2a3650;
 --pp-neutral:#141a28;
 --pp-image-bg:#16305a;
 --pp-video-bg:#2a1e52;
 --pp-video-ico:#b9a6ff;
 --pp-clock:rgba(255,255,255,.92);
 --pp-dock:rgba(255,255,255,.22);
 --pp-scrim:rgba(5,9,16,.6);
 --pp-shade:rgba(0,0,0,.28);
 --pp-shadow:0 8px 24px rgba(0,0,0,.35);
}
.pp [hidden]{display:none!important}
.pp .ux-page-head{margin-bottom:var(--space-16)}
.pp-empty{margin:0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.pp-empty-btn{width:auto;margin-top:var(--space-16);padding:0 var(--space-24)}

/* ---- moldura da tela do carro ---- */
.pp-frame{padding:var(--space-8);border:1px solid var(--pp-frame-line);border-radius:var(--radius-16);background:linear-gradient(160deg,var(--pp-frame-a),var(--pp-frame-b));box-shadow:var(--pp-shadow)}
.pp-screen{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-10);overflow:hidden;background:var(--pp-neutral)}
.pp-media,.pp-shade{position:absolute;inset:0}
.pp-fill{display:block;width:100%;height:100%;object-fit:cover}
.pp-shade{pointer-events:none;background:linear-gradient(180deg,var(--pp-shade) 0%,transparent 30%,transparent 70%,var(--pp-shade) 100%)}
.pp-neutral{position:absolute;inset:0;display:grid;place-items:center;background:var(--pp-neutral);color:var(--ux-muted);font-size:12px;line-height:16px;text-align:center;padding:0 var(--space-24)}
/* Simulação da tela inicial do carro (não é exceção à regra 12): relógio, data e 5 ícones genéricos. */
.pp-clock{position:absolute;left:var(--space-12);top:var(--space-8);display:flex;flex-direction:column;pointer-events:none}
.pp-time{font:500 20px/24px var(--font-display);color:var(--pp-clock);letter-spacing:-.01em}
.pp-date{font:400 8px/12px var(--font-display);color:var(--pp-clock)}
.pp-dock{position:absolute;left:var(--space-12);bottom:var(--space-8);display:flex;gap:var(--space-8);pointer-events:none}
.pp-dock-ico{width:18px;height:18px;border-radius:5px;background:var(--pp-dock)}
.pp-tag{position:absolute;right:var(--space-8);top:var(--space-8);padding:2px 6px;border-radius:4px;background:var(--pp-scrim);color:#fff;font:500 9px/14px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;pointer-events:none}
.pp-tag.is-preview{background:var(--ux-blue)}
.pp-caption{margin:var(--space-12) 0 0;font-size:12px;line-height:16px;color:var(--ux-muted)}
.pp-note{margin:var(--space-16) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}

/* ---- prévia: Atual / Nova, card do arquivo, avisos ---- */
.pp-compare{margin-top:var(--space-12)}
.pp-file{display:flex;align-items:center;gap:var(--space-12);margin-top:var(--space-16);min-height:64px;padding:var(--space-12) var(--space-16);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card)}
.pp-file-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.pp-file-name{font-size:15px;line-height:22px;color:var(--ux-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-file-sub{font-size:13px;line-height:20px;color:var(--ux-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-swap{flex:0 0 auto;min-width:var(--ux-col);min-height:44px;padding:0;border:0;background:none;color:var(--ux-link);font:500 13px var(--font-display);cursor:pointer;text-align:right}
.pp-swap:disabled{opacity:.45;cursor:default}
.pp-warn-host{display:grid;gap:var(--space-8)}
.pp-warn-host:not(:empty){margin-top:var(--space-12)}

/* ---- aplicado / falhou ---- */
.pp-result{display:flex;align-items:center;gap:var(--space-12);margin-top:var(--space-16);padding:var(--space-12) var(--space-16);border:1px solid var(--ux-sky-line);border-radius:var(--radius-12);background:var(--ux-sky-deep)}
.pp-result-ico{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ux-sky);color:var(--ux-sky-deep)}
.pp-result-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.pp-result-title{font:500 15px/22px var(--font-display);color:var(--ux-text)}
.pp-result-sub{font-size:13px;line-height:20px;color:var(--ux-label)}
.pp-result.is-fail{border-color:var(--ux-red-line);background:var(--ux-red-deep)}
.pp-result.is-fail .pp-result-ico{background:var(--ux-red);color:var(--ux-red-deep)}
.pp-result.is-fail .pp-result-sub{color:var(--ux-red-text)}
.pp-caption+.pp-result{margin-top:var(--space-16)}

/* ---- "Trocar por": dois cartões de mesma largura, 116 px no mínimo, cantos de 14 px ---- */
.pp .ux-section{margin:var(--space-24) 0 0}
.pp-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.pp-pick{min-height:116px;padding:var(--space-16);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-12);border:1px solid var(--ux-card-line);border-radius:var(--radius-14);background:var(--ux-card);color:var(--ux-text);text-align:left;font:inherit;cursor:pointer}
.pp-pick:disabled{cursor:default;opacity:.5}
.pp-pick-ico{width:40px;height:40px;border-radius:var(--radius-10);display:grid;place-items:center;background:var(--pp-image-bg);color:var(--ux-blue-soft)}
.pp-pick.is-video .pp-pick-ico{background:var(--pp-video-bg);color:var(--pp-video-ico)}
.pp-pick-text{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.pp-pick-title{font:500 15px/22px var(--font-display)}
.pp-pick-sub{font-size:13px;line-height:20px;color:var(--ux-muted)}
@media (hover:hover) and (pointer:fine){.pp-pick:hover:not(:disabled){background:var(--ux-hover)}}
.pp-restore{margin-top:var(--space-24)}

/* ---- rodapé fixo: "Cancelar" (contorno, 104 px) e "Aplicar no carro" (o resto) ---- */
.pp-foot .ux-footbar-inner{display:flex;gap:var(--space-8)}
.pp-foot .pp-cancel{flex:0 0 104px;width:104px}
.pp-foot .pp-apply{flex:1 1 auto;width:auto}
.pp-foot .pp-apply:disabled{opacity:1;background:var(--pp-image-bg);color:var(--ux-blue-soft)}

/* Imagens 16:9 nunca passam de 70% da altura da janela (computador). */
@media (min-width:1024px){
 .pp-frame{max-width:calc(70vh * 16 / 9);margin:0 auto}
}