/* ============================================================
   BROCHURES — capa del sitio sobre el diseño original
   El diseño de cada brochure vive en su propio HTML (el mismo con
   el que se generó el PDF). Aquí solo va lo que añade la web: la
   barra de acciones, el ajuste a pantallas angostas y el modo de
   edición del admin. Todo con prefijo bx- para no tocar el diseño.
   ============================================================ */
.bx-bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: rgba(10, 10, 11, .95); backdrop-filter: blur(6px);
    border-bottom: 1px solid #262320; padding: 10px 16px; margin-bottom: 14px;
    font-family: "Montserrat", Arial, sans-serif; line-height: 1.2;
}
.bx-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-back { color: #a9a59a; text-decoration: none; font-size: 13px; }
.bx-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
    background: #fff; color: #161616; border: 0; border-radius: 8px; padding: 9px 14px;
    font-family: inherit; font-size: 13px; font-weight: 700;
}
.bx-btn.bx-gold { background: #FBBF0D; }
.bx-btn.bx-ghost { background: transparent; color: #ddd; border: 1px solid #555; }
.bx-btn:disabled { opacity: .6; cursor: wait; }
.bx-label { color: #FBBF0D; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bx-msg { color: #ddd; font-size: 12.5px; }

/* Pantallas más angostas que la hoja: se reduce la página entera, sin recomponerla */
@media screen {
    .page { zoom: var(--bx-zoom, 1); }
}

/* ── Modo edición (solo admin, con ?editar=1) ── */
.bx-editing [data-e^="t"] { outline: 1px dashed rgba(251, 191, 13, .45); outline-offset: 2px; cursor: text; }
.bx-editing [data-e^="t"]:hover, .bx-editing [data-e^="t"]:focus { outline: 2px solid #FBBF0D; background: rgba(251, 191, 13, .08); }
.bx-editing img[data-e^="i"] { cursor: pointer; outline: 2px dashed rgba(251, 191, 13, .6); outline-offset: -2px; }
.bx-editing img[data-e^="i"]:hover { outline: 3px solid #FBBF0D; }
.bx-editing .page.bx-overflow { box-shadow: 0 0 0 4px #dc3545 !important; }
.bx-editing .page.bx-overflow::after {
    content: "El contenido no cabe en esta página: acorta algún texto"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
    background: #dc3545; color: #fff; font: 700 12px/1.3 "Montserrat", Arial, sans-serif; text-align: center; padding: 6px;
}

@media print {
    .bx-bar { display: none !important; }
    /* Una hoja A4 exacta por página: sin hojas en blanco intermedias ni al final. */
    .page {
        zoom: 1 !important; height: 297mm !important; min-height: 0 !important; overflow: hidden !important;
        page-break-after: auto !important; break-after: page !important;
    }
    .page:last-of-type { break-after: auto !important; }
}

/* ── PDF subido desde el admin (versión oficial que también envía el bot) ── */
/* Mientras se decide qué mostrar, el diseño base no asoma (como mucho 5 s). */
@media screen {
    body:not(.bx-ready) .page { visibility: hidden; animation: bx-reveal 0s 5s forwards; }
}
@keyframes bx-reveal { to { visibility: visible; } }
.bx-pdf-mode .page { display: none !important; }
.bx-pdf { padding: 0 6px 24px; }
.bx-pdf canvas {
    display: block; width: 100%; max-width: 794px; height: auto;
    margin: 0 auto 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.bx-pdf-loading { color: #a9a59a; text-align: center; padding: 60px 16px; font: 500 14px "Montserrat", Arial, sans-serif; }
@media print { .bx-pdf { display: none; } }