.pp-disenador { margin: 0 0 1.5em; padding: 1.25em; background: #FFF8E6; border-radius: 12px; border: 1px solid #F6E7B0; }
.pp-disenador .pp-titulo { margin: 0 0 .4em; font-size: 1.25em; }
.pp-disenador .pp-ayuda, .pp-disenador .pp-nota, .pp-disenador .pp-tip { font-size: .9em; color: #555; margin: .4em 0; }
.pp-subir { display: inline-block; cursor: pointer; margin: .5em 0; }
.pp-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pp-subir span { display: inline-block; padding: .6em 1.2em; background: #1A1A1A; color: #fff; border-radius: 6px; font-weight: 600; }
.pp-subir input:focus-visible + span { outline: 3px solid #E8B810; outline-offset: 2px; }
.pp-area { display: flex; flex-wrap: wrap; gap: 1.25em; align-items: flex-start; margin-top: .75em; }
.pp-area[hidden] { display: none; }
.pp-editor canvas { width: 280px; max-width: 100%; height: auto; touch-action: none; cursor: grab; border-radius: 50%; background: #fff; }
.pp-vista canvas { width: 58mm; max-width: 220px; height: auto; border-radius: 50%; box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.pp-zoom { display: flex; gap: .5em; align-items: center; font-size: .9em; margin-top: .5em; }
.pp-zoom input { flex: 1; }
.pp-estado { font-weight: 600; margin: .5em 0 0; }
.pp-estado.pp-error { color: #b82105; }
.pp-disenador [hidden] { display: none !important; }
.pp-comparar { flex-basis: 100%; }
.pp-tira { display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-end; }
.pp-tira figure { margin: 0; text-align: center; font-size: .85em; color: #555; }
.pp-tira canvas { display: block; margin: 0 auto .3em; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.pp-calidad { margin: .4em 0 0; padding: .5em .75em; border-radius: 6px; font-size: .9em; }
.pp-calidad-regular { background: #FFF1C2; color: #5c4600; }
.pp-calidad-mala { background: #FDE2DD; color: #8a1c08; font-weight: 600; }