/* Fondo generado por Cloudflare Workers AI. Nunca reemplaza logos, textos ni productos. */
.bloque-fondo-ia {
    border: 1px solid rgba(197, 145, 59, 0.28);
    background: linear-gradient(145deg, #fffdf8, #f6f0e5);
}

.fondo-ia-intro {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #ded5c5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
}

.fondo-ia-intro strong {
    color: #332519;
}

.fondo-ia-intro span,
.estado-fondo-ia {
    color: #626a6d;
    font-size: 13px;
    line-height: 1.45;
}

.acciones-fondo-ia {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.boton-ia {
    min-height: 44px;
    padding: 11px 16px;
    color: #fff;
    background: #17100c;
    border: 1px solid #b88734;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.boton-ia:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.boton-quitar-ia {
    min-height: 44px;
    padding: 11px 16px;
    color: #443327;
    background: transparent;
    border: 1px solid #cfc3b3;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.estado-fondo-ia {
    min-height: 20px;
    margin: 10px 0 0;
}

.estado-fondo-ia[data-estado="ok"] {
    color: #17643b;
}

.estado-fondo-ia[data-estado="error"] {
    color: #9b2c20;
}

.flyer-ai-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

.flyer-canvas.con-fondo-ia .flyer-ai-background {
    display: block;
}

.flyer-canvas.con-fondo-ia .flyer-ai-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 3, 2, 0.72) 0%, rgba(5, 3, 2, 0.26) 28%, transparent 47%),
        linear-gradient(0deg, rgba(5, 3, 2, 0.28) 0%, transparent 25%),
        radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.22) 100%);
}

.flyer-canvas.con-fondo-ia {
    background: #0b0806 !important;
}

.flyer-canvas.con-fondo-ia .flyer-gallery {
    background: transparent !important;
}

.flyer-canvas.con-fondo-ia .flyer-gallery::before {
    background: linear-gradient(180deg, rgba(5, 3, 2, 0.16), transparent 30%, transparent 70%, rgba(5, 3, 2, 0.18)) !important;
}

@media print {
    .flyer-ai-background,
    .flyer-ai-background::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ================================================================
   V12 · DISEÑO COMPLETO CON IA
   La imagen generada ya contiene la escena y la composición de productos.
   Logo, textos, precio, marco y pie siguen siendo capas exactas de la app.
   ================================================================ */

.campo-instrucciones-ia {
    margin-top: 14px;
}

.campo-instrucciones-ia textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
}

.campo-instrucciones-ia > small,
.campo-instrucciones-ia label small {
    color: #70777a;
    font-weight: 500;
}

.flyer-canvas.con-fondo-ia .flyer-ai-background {
    z-index: 1;
    display: block;
    background-position: center;
    background-size: cover;
}

.flyer-canvas.con-fondo-ia .flyer-ai-background::after {
    background:
        linear-gradient(180deg, rgba(5, 3, 2, 0.32) 0%, rgba(5, 3, 2, 0.10) 27%, transparent 48%),
        linear-gradient(0deg, rgba(5, 3, 2, 0.16) 0%, transparent 22%),
        radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.12) 100%);
}

/* Evita duplicar los productos: ya forman parte de la composición IA. */
.flyer-canvas.con-fondo-ia .flyer-gallery {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.flyer-canvas.con-fondo-ia .flyer-gallery::before {
    display: none !important;
}

/* Las capas exactas siempre quedan por encima del diseño generado. */
.flyer-canvas.con-fondo-ia .flyer-header,
.flyer-canvas.con-fondo-ia .flyer-offer,
.flyer-canvas.con-fondo-ia .flyer-price,
.flyer-canvas.con-fondo-ia .flyer-footer,
.flyer-canvas.con-fondo-ia .flyer-ornamental-frame,
.flyer-canvas.con-fondo-ia .flyer-frame-layer {
    position: absolute;
    z-index: 25 !important;
}

.flyer-canvas.con-fondo-ia .flyer-price {
    z-index: 32 !important;
}

.flyer-canvas.con-fondo-ia .flyer-ornamental-frame,
.flyer-canvas.con-fondo-ia .flyer-frame-layer {
    z-index: 35 !important;
}

@media print {
    .flyer-canvas.con-fondo-ia .flyer-gallery {
        visibility: hidden !important;
        opacity: 0 !important;
    }
}