.czpp-wrap{
    --czpp-dark:#00353f;
    --czpp-border:#dbe3e5;
    --czpp-bg:#f5f8f8;
    max-width:1200px;
    margin:0 auto;
    font-family:inherit;
    color:#142a2f;
}
.czpp-header{text-align:center;margin-bottom:24px}
.czpp-header h2{margin:4px 0 8px;font-size:clamp(28px,4vw,44px);line-height:1.1}
.czpp-header p{margin:0;color:#5b6c70}
.czpp-eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em;color:var(--czpp-dark)}
.czpp-dropzone{
    padding:42px 24px;
    border:2px dashed #a8b9bd;
    border-radius:20px;
    text-align:center;
    background:var(--czpp-bg);
    transition:.2s ease;
}
.czpp-dropzone.is-dragging{border-color:var(--czpp-dark);transform:scale(1.01)}
.czpp-dropzone p{margin:12px 0 4px}
.czpp-dropzone small{color:#6b7b7f}
.czpp-primary,.czpp-secondary,.czpp-icon-btn{
    appearance:none;border:0;cursor:pointer;font:inherit;
}
.czpp-primary{
    background:var(--czpp-dark);color:#fff;border-radius:12px;
    padding:13px 20px;font-weight:800;
}
.czpp-primary:disabled{opacity:.55;cursor:not-allowed}
.czpp-secondary{
    background:#fff;color:var(--czpp-dark);border:1px solid var(--czpp-border);
    border-radius:10px;padding:9px 12px;font-weight:700;
}
.czpp-toolbar,.czpp-summary{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    margin-top:20px;padding:16px 18px;background:#fff;
    border:1px solid var(--czpp-border);border-radius:16px;
}
.czpp-toolbar strong,.czpp-toolbar span{display:block}
.czpp-toolbar span{font-size:13px;color:#6b7b7f;margin-top:3px}
.czpp-actions{display:flex;flex-wrap:wrap;gap:8px}
.czpp-status{min-height:26px;padding-top:10px;font-weight:700}
.czpp-status.is-error{color:#a42424}
.czpp-status.is-success{color:#207540}
.czpp-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:18px;margin-top:12px;
}
.czpp-card{
    overflow:hidden;background:#fff;border:1px solid var(--czpp-border);
    border-radius:18px;box-shadow:0 8px 24px rgba(0,53,63,.06);
}
.czpp-preview-shell{
    height:240px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2f3;
    overflow:hidden;
}
.czpp-image-wrap{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:10px;
    box-shadow:0 4px 14px rgba(0,53,63,.12);
}
.czpp-image-wrap img{
    width:100%;
    height:100%;
    transition:.2s ease;
}
.czpp-image-wrap.fit-cover img{object-fit:cover}
.czpp-image-wrap.fit-contain img{object-fit:contain}
.czpp-card-body{padding:14px}
.czpp-card-top,.czpp-meta,.czpp-controls,.czpp-copies{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.czpp-quality{font-size:12px;font-weight:800;padding:5px 8px;border-radius:999px}
.czpp-quality.is-good{background:#e3f6e8;color:#176534}
.czpp-quality.is-medium{background:#fff3d3;color:#805700}
.czpp-quality.is-low{background:#fde4e4;color:#9a2020}
.czpp-icon-btn{width:32px;height:32px;border-radius:50%;background:#f2f4f4;font-size:22px}
.czpp-meta{font-size:12px;color:#6b7b7f;margin:12px 0}
.czpp-controls{align-items:stretch}
.czpp-controls select,.czpp-copies input{
    border:1px solid var(--czpp-border);border-radius:10px;background:#fff;
    padding:8px 10px;
}
.czpp-controls select{min-width:0;flex:1}
.czpp-copies{margin-top:12px;font-weight:700}
.czpp-copies input{width:74px;text-align:center}
.czpp-summary{position:sticky;bottom:14px;z-index:20;box-shadow:0 12px 32px rgba(0,53,63,.15)}
.czpp-summary span{display:block;font-size:13px;color:#6b7b7f}
.czpp-summary strong{display:block;font-size:26px;color:var(--czpp-dark)}
.czpp-toolbar[hidden],.czpp-summary[hidden]{display:none!important}
@media(max-width:700px){
    .czpp-toolbar,.czpp-summary{align-items:stretch;flex-direction:column}
    .czpp-actions{width:100%}
    .czpp-actions .czpp-secondary{flex:1}
    .czpp-summary .czpp-primary{width:100%}
    .czpp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .czpp-card-body{padding:10px}
    .czpp-controls{flex-direction:column}
}
@media(max-width:420px){
    .czpp-grid{grid-template-columns:1fr}
}

.czpp-format-bar{
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    padding:16px 18px;margin-bottom:14px;background:#fff;
    border:1px solid var(--czpp-border);border-radius:16px;
}
.czpp-format-bar strong,.czpp-format-bar span{display:block}
.czpp-format-bar span{margin-top:4px;font-size:13px;color:#6b7b7f}
.czpp-format-bar select,.czpp-format-select select{
    border:1px solid var(--czpp-border);border-radius:10px;background:#fff;
    padding:10px 12px;
}
.czpp-format-select{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:12px 0;font-weight:700;
}
.czpp-format-select select{min-width:145px;max-width:100%}
@media(max-width:700px){
    .czpp-format-bar{align-items:stretch;flex-direction:column}
    .czpp-format-bar select{width:100%}
}

.czpp-edit-btn{width:100%}
.czpp-editor[hidden]{display:none!important}
.czpp-editor{
    position:fixed;inset:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:18px;
}
.czpp-editor-backdrop{
    position:absolute;inset:0;background:rgba(0,20,24,.78);
    backdrop-filter:blur(4px);
}
.czpp-editor-dialog{
    position:relative;z-index:1;width:min(100%,1050px);max-height:92vh;
    overflow:auto;background:#fff;border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.czpp-editor-head,.czpp-editor-footer{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 20px;border-bottom:1px solid var(--czpp-border);
}
.czpp-editor-head h3{margin:2px 0 0}
.czpp-editor-footer{border-top:1px solid var(--czpp-border);border-bottom:0}
.czpp-editor-layout{
    display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.6fr);
    gap:22px;padding:22px;
}
.czpp-editor-stage-wrap{min-width:0}
.czpp-editor-stage{
    position:relative;width:100%;max-height:65vh;margin:auto;
    overflow:hidden;background:#e8edef;touch-action:none;cursor:grab;
    border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.czpp-editor-stage:active{cursor:grabbing}
.czpp-editor-stage img{
    position:absolute;
    left:50%;
    top:50%;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:fill;
    transform-origin:center center;
    user-select:none;
    pointer-events:none;
    will-change:transform;
}
/* El tamaño de la imagen lo calcula JavaScript para respetar la proporción
   real también después de giros de 90° y 270°. */
.czpp-editor-stage.fit-cover img,
.czpp-editor-stage.fit-contain img,
.czpp-editor-stage.fit-free img{object-fit:fill}
.czpp-editor-safe{
    position:absolute;inset:6%;border:2px dashed rgba(255,255,255,.9);
    box-shadow:0 0 0 9999px rgba(0,0,0,.08);pointer-events:none;
}
.czpp-editor-help{text-align:center;color:#65767a;font-size:13px;margin:10px 0 0}
.czpp-editor-panel{display:flex;flex-direction:column;gap:16px}
.czpp-editor-panel label{display:flex;flex-direction:column;gap:7px;font-weight:800}
.czpp-editor-panel select,.czpp-editor-panel input[type="range"]{width:100%}
.czpp-editor-panel select{
    border:1px solid var(--czpp-border);border-radius:10px;background:#fff;
    padding:10px 12px;
}
.czpp-editor-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.czpp-editor-note{
    padding:14px;border-radius:12px;background:#f4f7f7;border:1px solid var(--czpp-border);
}
.czpp-editor-note p{margin:5px 0 0;color:#617276;font-size:13px}
body.czpp-editor-open{overflow:hidden}
@media(max-width:800px){
    .czpp-editor{padding:0}
    .czpp-editor-dialog{width:100%;max-height:100vh;height:100vh;border-radius:0}
    .czpp-editor-layout{grid-template-columns:1fr;padding:14px}
    .czpp-editor-stage{max-height:50vh}
    .czpp-editor-head,.czpp-editor-footer{padding:14px}
}

.czpp-grid{
    align-items:stretch;
}
.czpp-card{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:520px;
}
.czpp-card-body{
    display:flex;
    flex-direction:column;
    flex:1;
}
.czpp-controls{
    margin-top:auto;
}
.czpp-copies{
    margin-top:12px;
}
@media(max-width:700px){
    .czpp-preview-shell{height:210px}
    .czpp-card{min-height:490px}
}
@media(max-width:420px){
    .czpp-preview-shell{height:240px}
    .czpp-card{min-height:0}
}

/*
 * El papel exterior se dimensiona según su orientación.
 * Horizontal: manda el ancho.
 * Vertical: manda la altura.
 */
.czpp-preview-shell .czpp-image-wrap.czpp-horizontal{
    width:min(100%, 320px);
    height:auto;
    max-height:100%;
}
.czpp-preview-shell .czpp-image-wrap.czpp-vertical{
    height:100%;
    width:auto;
    max-width:100%;
}

/* Permite que aspect-ratio recalcule de verdad el lado contrario. */
.czpp-preview-shell .czpp-image-wrap.czpp-horizontal img,
.czpp-preview-shell .czpp-image-wrap.czpp-vertical img{
    display:block;
}

/* Encaje libre: papel blanco y fotografía desplazable dentro del marco. */
.czpp-editor-stage.fit-free,
.czpp-image-wrap.fit-free{
    background:#fff;
}
.czpp-editor-stage.fit-free img{
    object-fit:fill;
}
.czpp-image-wrap.fit-free img{
    object-fit:contain;
}
.czpp-editor-stage.fit-free{
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.12),
        0 8px 24px rgba(0,53,63,.12);
}

/* Tarjeta simplificada: miniatura limpia, sin reproducir el encuadre final. */
.czpp-preview-shell{
    position:relative;
    height:240px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2f3;
    overflow:hidden;
}
.czpp-clean-preview{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,53,63,.12);
}
.czpp-clean-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none!important;
}
.czpp-edited-badge{
    position:absolute;
    left:12px;
    bottom:12px;
    padding:6px 9px;
    border-radius:999px;
    background:#00353f;
    color:#fff;
    font-size:11px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(0,53,63,.2);
}
.czpp-edit-state{
    margin:8px 0 4px;
    font-size:12px;
    font-weight:700;
    color:#5f7175;
}

/*
 * Vista previa real del papel dentro de una tarjeta de tamaño fijo.
 * La tarjeta no cambia de altura; el papel sí cambia de proporción.
 */
.czpp-paper-preview{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    max-height:100%;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 14px rgba(0,53,63,.14);
}
.czpp-paper-preview.czpp-horizontal{
    width:min(100%, 320px);
    height:auto;
}
.czpp-paper-preview.czpp-vertical{
    height:100%;
    width:auto;
}
.czpp-paper-preview img{
    width:100%;
    height:100%;
    display:block;
    transform-origin:center;
    object-position:50% 50%;
}
.czpp-paper-preview.fit-cover img{
    object-fit:cover;
}
.czpp-paper-preview.fit-contain img,
.czpp-paper-preview.fit-free img{
    object-fit:contain;
}
.czpp-paper-preview.fit-contain,
.czpp-paper-preview.fit-free{
    background:#fff;
}

/* Anula la miniatura simplificada de la versión anterior. */
.czpp-clean-preview{
    display:none!important;
}

/* Miniatura renderizada por el mismo motor PHP del archivo final. */
.czpp-rendered-preview{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    max-height:100%;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 14px rgba(0,53,63,.14);
}
.czpp-rendered-preview.czpp-horizontal{
    width:min(100%, 320px);
    height:auto;
}
.czpp-rendered-preview.czpp-vertical{
    height:100%;
    width:auto;
}
.czpp-rendered-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transform:none!important;
}

.czpp-fixed-format,
.czpp-editor-fixed-format{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid var(--czpp-border);
    border-radius:10px;
    background:#f7f9f9;
}
.czpp-fixed-format{
    margin:12px 0;
}
.czpp-fixed-format span,
.czpp-editor-fixed-format span{
    font-weight:800;
}
.czpp-fixed-format strong,
.czpp-editor-fixed-format strong{
    color:var(--czpp-dark);
}
.czpp-editor-fixed-format{
    flex-direction:column;
    align-items:flex-start;
}

/* v0.8.5: el borde exterior es el recorte final real. */
.czpp-editor-safe{
    display:none!important;
}
.czpp-editor-stage{
    box-shadow:
        inset 0 0 0 2px rgba(0,53,63,.85),
        0 8px 24px rgba(0,53,63,.12);
}
.czpp-editor-stage::after{
    content:"Área final";
    position:absolute;
    top:10px;
    left:10px;
    z-index:5;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(0,53,63,.82);
    color:#fff;
    font-size:11px;
    font-weight:800;
    pointer-events:none;
}

/* v0.8.8: el área de edición nunca puede quedar debajo del pie del modal. */
.czpp-editor-dialog{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.czpp-editor-head,
.czpp-editor-footer{
    flex:0 0 auto;
    position:relative;
    z-index:20;
    background:#fff;
}
.czpp-editor-layout{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    align-items:start;
}
.czpp-editor-stage-wrap{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
}
.czpp-editor-stage{
    flex:0 0 auto;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
}
@media(max-width:800px){
    .czpp-editor-layout{
        overflow:auto;
    }
    .czpp-editor-stage{
        max-height:none;
    }
}


.czpp-finish-selector{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    margin:0 0 18px;padding:0;border:0;
}
.czpp-finish-selector legend{
    grid-column:1/-1;margin-bottom:8px;font-weight:800;color:var(--czpp-dark);
}
.czpp-finish-selector label{
    position:relative;display:flex;align-items:center;gap:12px;
    padding:15px 16px;border:1px solid var(--czpp-border);
    border-radius:14px;background:#fff;cursor:pointer;
}
.czpp-finish-selector label:has(input:checked){
    border:2px solid var(--czpp-dark);padding:14px 15px;
    box-shadow:0 6px 18px rgba(0,53,63,.09);
}
.czpp-finish-selector input{accent-color:var(--czpp-dark);width:18px;height:18px}
.czpp-finish-selector span,.czpp-finish-selector strong,.czpp-finish-selector small{display:block}
.czpp-finish-selector small{margin-top:3px;color:#6b7b7f;font-weight:400}
@media(max-width:600px){
    .czpp-finish-selector{grid-template-columns:1fr}
}

/* Flujo guiado de revelado */
.czpp-wrap{
    width:100%;
    max-width:1400px;
    padding:0 20px;
    box-sizing:border-box;
}
.czpp-steps{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin:0 0 18px;
    padding:12px 16px;
    background:#fff;
    border:1px solid var(--czpp-border);
    border-radius:16px;
}
.czpp-steps span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#607277;
    font-weight:700;
    font-size:14px;
}
.czpp-steps b,
.czpp-step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#edf3f4;
    color:var(--czpp-dark);
    font-size:13px;
    font-weight:800;
}
.czpp-steps .is-active b,
.czpp-step-number{
    background:var(--czpp-dark);
    color:#fff;
}
.czpp-flow-card{
    margin:0 0 18px;
    padding:22px;
    background:#fff;
    border:1px solid var(--czpp-border);
    border-radius:18px;
}
.czpp-section-head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
}
.czpp-section-head h3{
    margin:1px 0 4px;
    color:#142a2f;
    font-size:23px;
    line-height:1.2;
}
.czpp-section-head p{
    margin:0;
    color:#64767a;
}
.czpp-field{
    display:grid;
    gap:8px;
    max-width:430px;
    font-weight:800;
}
.czpp-field select{
    width:100%;
    border:1px solid var(--czpp-border);
    border-radius:11px;
    background:#fff;
    padding:12px 14px;
    font:inherit;
}
.czpp-lock-note{
    margin:12px 0 0;
    padding:10px 12px;
    border-radius:10px;
    background:#f3f7f7;
    color:#52666b;
    font-size:13px;
}
.czpp-finish-selector{
    margin:0;
}
.czpp-review-section .czpp-toolbar{
    margin-top:0;
}
.czpp-order-summary{
    margin-bottom:24px;
}
.czpp-summary-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,.45fr);
    gap:26px;
    align-items:stretch;
}
.czpp-summary-details{
    padding-right:26px;
    border-right:1px solid var(--czpp-border);
}
.czpp-summary-details h4{
    margin:0 0 14px;
    font-size:21px;
}
.czpp-summary-details dl{
    display:grid;
    gap:9px;
    margin:0;
}
.czpp-summary-details dl div{
    display:grid;
    grid-template-columns:minmax(120px,.35fr) 1fr;
    gap:14px;
}
.czpp-summary-details dt{
    color:#62757a;
    font-weight:700;
}
.czpp-summary-details dd{
    margin:0;
    font-weight:800;
    color:#142a2f;
}
.czpp-summary-buy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}
.czpp-summary-buy > span{
    color:#62757a;
}
.czpp-summary-buy > strong{
    color:var(--czpp-dark);
    font-size:32px;
    line-height:1;
}
.czpp-summary-buy .czpp-primary{
    width:100%;
    margin-top:4px;
}
.czpp-flow-card[hidden]{display:none!important}
.czpp-wrap.is-config-locked .czpp-field select,
.czpp-wrap.is-config-locked .czpp-finish-selector label{
    opacity:.72;
}
@media(max-width:800px){
    .czpp-wrap{padding:0 12px}
    .czpp-steps{
        grid-template-columns:repeat(5,1fr);
        padding:10px 8px;
    }
    .czpp-steps span{
        flex-direction:column;
        gap:4px;
        font-size:10px;
        text-align:center;
    }
    .czpp-steps b{width:26px;height:26px}
    .czpp-flow-card{padding:16px}
    .czpp-section-head h3{font-size:20px}
    .czpp-summary-grid{grid-template-columns:1fr}
    .czpp-summary-details{
        padding-right:0;
        padding-bottom:18px;
        border-right:0;
        border-bottom:1px solid var(--czpp-border);
    }
}
@media(max-width:480px){
    .czpp-steps span{font-size:0}
    .czpp-steps b{font-size:12px}
    .czpp-summary-details dl div{grid-template-columns:1fr auto}
}