.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;

}

/* Antes de guardar un encuadre, la tarjeta usa la vista previa original.

   Aplicamos el mismo zoom inicial del editor para que la miniatura no

   muestre más imagen que el área final de impresión. */

.czpp-rendered-preview img.is-source-preview{

    object-fit:cover;

    object-position:var(--czpp-card-pos-x, 50%) var(--czpp-card-pos-y, 50%);

    transform:scale(var(--czpp-card-zoom, 1))!important;

    transform-origin:center center;

}

/* Las miniaturas ya renderizadas por PHP representan el resultado final

   y no deben recibir un segundo zoom en el navegador. */

.czpp-rendered-preview img.is-rendered-preview{

    object-fit:fill;

    object-position:center;

    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}

}

/* v1.1.8: barra de pasos compacta y coherente con Lienzos/Pósters */

.czpp-steps{position:sticky;top:10px;z-index:20;padding:12px;border-color:#d8e2e4}

.czpp-steps span{gap:7px;font-size:12px}

.czpp-steps b{width:24px;height:24px;font-size:12px}

@media(max-width:800px){.czpp-steps{position:static;padding:10px 8px}.czpp-steps span{font-size:10px}.czpp-steps b{width:26px;height:26px}}

@media(max-width:480px){.czpp-steps span{font-size:0}.czpp-steps b{font-size:12px}}

/* v1.1.10 — Revelado: eliminar fondo rectangular del contenedor exterior */

#czpp-app.czpp-wrap{

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

}

#czpp-app.czpp-wrap > .czpp-steps,

#czpp-app.czpp-wrap > .czpp-flow-card{

    position:relative;

    width:100%;

    max-width:100%;

    box-sizing:border-box;

}

#czpp-app.czpp-wrap > .czpp-steps{

    margin:0 0 16px !important;

    background:#fff !important;

    border:1px solid #d8e2e4 !important;

    border-radius:16px !important;

    overflow:hidden !important;

}

#czpp-app.czpp-wrap > .czpp-flow-card{

    background:#fff !important;

    border:1px solid var(--czpp-border) !important;

    border-radius:16px !important;

}

/* v1.1.11 — Revelado: mismo aislamiento visual que Pósters */

#czpp-app.czpp-wrap{

    width:100% !important;

    max-width:1400px !important;

    margin:0 auto !important;

    padding:18px !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}

#czpp-app.czpp-wrap > .czpp-steps{

    margin:0 0 18px !important;

    padding:12px !important;

    background:#fff !important;

    border:1px solid #d8e2e4 !important;

    border-radius:16px !important;

    box-shadow:none !important;

}

#czpp-app.czpp-wrap > .czpp-flow-card{

    margin:0 0 18px !important;

    padding:22px !important;

    background:#fff !important;

    border:1px solid #dce6e8 !important;

    border-radius:16px !important;

    box-shadow:none !important;

}

/* Divi puede aplicar fondo al módulo/código que contiene el shortcode de revelado.

   Lo neutralizamos solo cuando contiene #czpp-app. */

.et_pb_module:has(#czpp-app),

.et_pb_code:has(#czpp-app),

.et_pb_code_inner:has(#czpp-app){

    background:transparent !important;

    box-shadow:none !important;

}

@media(max-width:900px){

    #czpp-app.czpp-wrap{padding:10px !important}

    #czpp-app.czpp-wrap > .czpp-flow-card{padding:15px !important}

}

/* ==================================================

   PROGRESO DE SUBIDA DE FOTOGRAFÍAS

================================================== */

.czpp-upload-progress{

    margin-top:14px;

    padding:14px 16px;

    background:#f7f9f9;

    border:1px solid var(--czpp-border);

    border-radius:14px;

}

.czpp-upload-progress[hidden]{display:none !important;}

.czpp-upload-progress__head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-bottom:9px;

}

.czpp-upload-progress__head strong{

    color:var(--czpp-dark);

    font-size:14px;

    line-height:1.3;

}

.czpp-upload-progress__head span{

    flex:0 0 auto;

    color:#63757a;

    font-size:12px;

    line-height:1.3;

    font-weight:700;

}

.czpp-upload-progress__track{

    width:100%;

    height:9px;

    overflow:hidden;

    background:#e4ebec;

    border-radius:999px;

}

.czpp-upload-progress__fill{

    display:block;

    width:0;

    height:100%;

    background:var(--czpp-dark);

    border-radius:inherit;

    transition:width .22s ease;

}

.czpp-upload-progress.is-complete .czpp-upload-progress__fill{background:#207540;}

.czpp-upload-progress.has-errors .czpp-upload-progress__fill{background:#a42424;}

@media(max-width:767px){

    .czpp-upload-progress__head{

        align-items:flex-start;

        flex-direction:column;

        gap:4px;

    }

}

/* ==================================================

   EDITOR FOTO - AJUSTES UI

   Zoom +/- · área plana · sin etiqueta Área final

================================================== */

.czpp-editor-stage{

    border-radius:0 !important;

}

.czpp-editor-stage::after{

    content:none !important;

    display:none !important;

}

.czpp-editor-note{

    display:none !important;

}

.czpp-editor-zoom-control{

    display:grid;

    grid-template-columns:42px minmax(0,1fr) 42px;

    align-items:center;

    gap:10px;

    width:100%;

}

.czpp-editor-zoom-control input[type="range"]{

    width:100%;

    min-width:0;

    margin:0;

}

.czpp-editor-zoom-btn{

    width:42px;

    height:42px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--czpp-border);

    border-radius:10px;

    background:#fff;

    color:#00353f;

    font:inherit;

    font-size:22px;

    font-weight:700;

    line-height:1;

    cursor:pointer;

}

.czpp-editor-zoom-btn:hover{

    border-color:#00353f;

    background:#f6f9f9;

}

.czpp-editor-zoom-btn:active{

    transform:translateY(1px);

}

/* EDITOR FOTO - orden de controles: Zoom primero, Medida al final */

.czpp-editor-range--priority{

    order:-10;

}

.czpp-editor-fixed-format--bottom{

    order:20;

    margin-top:2px;

}

/* ==================================================

   EDITOR FOTO - ZONA DE SEGURIDAD 3 MM (v3)

   Capa HTML real por encima de la imagen. No se exporta.

================================================== */

.czpp-editor-stage{

    position:relative !important;

    overflow:hidden !important;

}

.czpp-editor-stage #czpp-editor-image{

    z-index:1 !important;

}

.czpp-editor-safety-guide{

    display:block !important;

    position:absolute !important;

    left:var(--czpp-safe-x, 2.5%) !important;

    right:var(--czpp-safe-x, 2.5%) !important;

    top:var(--czpp-safe-y, 2.5%) !important;

    bottom:var(--czpp-safe-y, 2.5%) !important;

    border:1px solid rgba(255,255,255,.64) !important;

    outline:1px solid rgba(0,53,63,.18) !important;

    outline-offset:0 !important;

    box-shadow:none !important;

    border-radius:0 !important;

    pointer-events:none !important;

    z-index:999 !important;

}

.czpp-editor-help{

    max-width:720px;

    margin:10px auto 0 !important;

    line-height:1.45;

}

/* Añadir más fotografías sin mezclar medidas */
.czpp-add-more-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid #dbe3e7}
.czpp-add-more-wrap p{margin:0;color:#64747c;font-size:14px}
.czpp-add-more-photos{min-height:44px;padding:10px 18px;border:1px solid #00353f;border-radius:8px;background:#fff;color:#00353f;font-weight:700;cursor:pointer}
.czpp-add-more-photos:hover{background:#f3f7f8}
.czpp-add-more-photos:focus-visible{outline:2px solid #00353f;outline-offset:2px}
@media(max-width:600px){.czpp-add-more-wrap{align-items:stretch;flex-direction:column}.czpp-add-more-photos{width:100%}}

/* Ocultar acabados no disponibles aunque estilos previos definan display */
.czpp-finish-selector label[hidden]{display:none!important}

/* Polaroid 10x12, preview matches the server-rendered print */
.czpp-frame-picker{padding:14px;border:1px solid #dce4e5;border-radius:10px;margin-bottom:14px}
.czpp-frame-picker[hidden]{display:none!important}
.czpp-frame-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.czpp-frame-swatch{background:#f6f7f7;border:2px solid #dce4e5;border-radius:8px;padding:9px;cursor:pointer;font-size:12px;color:#17383c}
.czpp-frame-swatch.is-selected{border-color:#00353f;box-shadow:0 0 0 1px #00353f}
.czpp-frame-swatch.czpp-frame-black{background:#1e1e22;color:#fff}
.czpp-frame-swatch.czpp-frame-pink{background:#f8cfde}
.czpp-frame-swatch.czpp-frame-beige{background:#ebdbc1}
.czpp-polaroid-stage{background:var(--czpp-frame-color)!important;overflow:hidden}
.czpp-polaroid-stage::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--czpp-frame-color);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,4% 4%,96% 4%,96% 84.17%,4% 84.17%,4% 4%);box-sizing:border-box}

/* Polaroid exacto 10x12: ventana de 8x8 cm, centrada a 1 cm del borde superior */
.czpp-polaroid-stage::after{
 content:"" !important;
 display:block !important;
 position:absolute !important;
 inset:0 !important;
 z-index:5 !important;
 pointer-events:none !important;
 background:var(--czpp-frame-color,#fff) !important;
 clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,10% 8.333333%,90% 8.333333%,90% 75%,10% 75%,10% 8.333333%) !important;
 border:0 !important;
 box-shadow:none !important;
 padding:0 !important;
}

/* Polaroid 10x12: aperture 8x8 centered, top margin 1cm, bottom 3cm.
   Square aperture uses an outward shadow rather than unsupported evenodd clip-path. */
.czpp-polaroid-stage::after {
 content:"" !important;display:block !important;position:absolute !important;
 inset:auto !important;left:10% !important;top:8.333333% !important;
 width:80% !important;height:66.666667% !important;
 background:transparent !important;clip-path:none !important;
 border:0 !important;padding:0 !important;
 box-shadow:0 0 0 999px var(--czpp-frame-color,#fff) !important;
 z-index:5 !important;pointer-events:none !important;
}
/* The usual full-sheet 3mm guide does not apply to a framed print. */
.czpp-polaroid-stage .czpp-editor-safety-guide {display:none !important}
/* Unedited cards must show the product frame immediately. */
.czpp-rendered-preview.czpp-polaroid-card {
 position:relative !important;background:var(--czpp-card-frame,#fff) !important;
 display:block !important;overflow:hidden !important;
}
.czpp-rendered-preview.czpp-polaroid-card img.is-source-preview {
 position:absolute !important;left:10% !important;top:8.333333% !important;
 width:80% !important;height:66.666667% !important;
 object-fit:cover !important;transform:none !important;
 object-position:var(--czpp-card-pos-x,50%) var(--czpp-card-pos-y,50%) !important;
}

/* Correct 10x12 Polaroid with square 9x9 photo (0.5cm top/left/right, 2.5cm bottom).
   Rectangular opaque strips avoid even-odd clip-path / circular mask browser issues. */
.czpp-polaroid-stage::after {
 content:"" !important;
 position:absolute !important;inset:0 !important;
 left:0 !important;top:0 !important;width:100% !important;height:100% !important;
 background-color:transparent !important;
 background-image:
   linear-gradient(var(--czpp-frame-color,#fff),var(--czpp-frame-color,#fff)),
   linear-gradient(var(--czpp-frame-color,#fff),var(--czpp-frame-color,#fff)),
   linear-gradient(var(--czpp-frame-color,#fff),var(--czpp-frame-color,#fff)),
   linear-gradient(var(--czpp-frame-color,#fff),var(--czpp-frame-color,#fff)) !important;
 background-position:top,left,bottom,right !important;
 background-size:100% 4.166667%,5% 100%,100% 20.833333%,5% 100% !important;
 background-repeat:no-repeat !important;
 box-shadow:none !important;clip-path:none !important;border-radius:0 !important;
 z-index:5 !important;pointer-events:none !important;
}
.czpp-rendered-preview.czpp-polaroid-card img.is-source-preview {
 left:5% !important;top:4.166667% !important;
 width:90% !important;height:75% !important;
 border-radius:0 !important;
}

/* Color HTML picker and HEX field for Polaroid frames */
.czpp-frame-custom-label{display:block;font-weight:600;font-size:13px;margin:12px 0 6px}
.czpp-frame-custom{display:flex;align-items:center;gap:10px}
.czpp-frame-custom input[type=color]{width:58px;min-width:58px;height:43px;padding:3px;cursor:pointer;border:1px solid #cad7d9;border-radius:8px;background:#fff}
.czpp-frame-custom input[type=text]{min-width:0;flex:1;max-width:190px;height:43px;padding:8px 10px;border:1px solid #cad7d9;border-radius:8px;text-transform:uppercase;font-family:monospace}
.czpp-frame-error{display:block;color:#a32727;margin-top:5px;font-size:12px}
.czpp-frame-error[hidden]{display:none!important}