/* ═══════════════════════════════════════════════════════════════
   PDF PERSONALIZADO — editor por bloques + biblioteca
   ═══════════════════════════════════════════════════════════════ */

.cpdf-head { padding: 12px 0 16px; }
#app-container .cpdf-subtitle { margin: 0; font-size: 15px; color: var(--ap-label-2); }

.cpdf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.cpdf-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cpdf-count {
    margin-left: 4px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--ap-fill-strong);
}

.cpdf-save-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: 12.5px;
    color: var(--ap-label-3);
}

.cpdf-save-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ap-green);
    transition: background var(--ap-med) var(--ap-ease);
}

.cpdf-save-state[data-state="dirty"]::before { background: var(--ap-orange); }
.cpdf-save-state[data-state="saving"]::before { background: var(--ap-accent); animation: ap-pulse 1s ease-in-out infinite; }
.cpdf-save-state[data-state="error"]::before { background: var(--ap-red); }
.cpdf-save-state[data-state="error"] { color: var(--ap-red); }

/* ── Editor ────────────────────────────────────────────────────── */
.cpdf-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: 24px;
    align-items: start;
}

.cpdf-col { min-width: 0; display: grid; gap: 12px; }

#app-container .cpdf-panel {
    padding: 18px 20px;
    background: var(--ap-surface-1);
    border: 0.5px solid var(--ap-separator);
    border-radius: var(--ap-r-lg);
}

.cpdf-field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; }
.cpdf-field:last-child { margin-bottom: 0; }
.cpdf-field input, .cpdf-field select { width: 100%; }
.cpdf-label { font-size: 13px; font-weight: 500; color: var(--ap-label-2); }

#app-container #cpdfTitle {
    font-family: var(--ap-font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    min-height: 44px;
}

.cpdf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cpdf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cpdf-row > input { flex: 1 1 220px; }

.cpdf-details { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--ap-separator); }

.cpdf-details summary {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 8px 4px 4px;
    margin-left: -4px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ap-label-2);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.cpdf-details summary::-webkit-details-marker { display: none; }

.cpdf-details summary::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 4px 0 3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--ap-med) var(--ap-ease);
}

.cpdf-details[open] summary::before { transform: rotate(45deg); }
.cpdf-details summary:hover { color: var(--ap-label); background: rgba(255, 255, 255, 0.05); }
.cpdf-details[open] summary { margin-bottom: 14px; }

.cpdf-themes { display: flex; flex-wrap: wrap; gap: 8px; }

#app-container .cpdf-theme {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 86px;
    padding: 8px 6px;
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--ap-label-2);
    text-align: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--ap-fast) var(--ap-ease), border-color var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-theme:hover { background: rgba(255, 255, 255, 0.05); }
#app-container .cpdf-theme[aria-pressed="true"] { border-color: var(--ap-accent); color: var(--ap-label); background: var(--ap-accent-soft); }

.cpdf-theme-swatch {
    position: relative;
    display: block;
    width: 44px;
    height: 56px;
    border-radius: 5px;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cpdf-theme-swatch i { position: absolute; left: 6px; top: 8px; width: 3px; height: 12px; border-radius: 2px; }
.cpdf-theme-swatch b { position: absolute; left: 12px; top: 10px; width: 22px; height: 3px; border-radius: 2px; box-shadow: 0 7px 0 -0.5px currentColor; opacity: 0.85; }

.cpdf-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px; }

#app-container .cpdf-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    font-size: 14px;
    color: var(--ap-label);
    cursor: pointer;
}

#app-container .cpdf-checks input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; }

#app-container .cpdf-checks input[type="color"] {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.cpdf-checks input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cpdf-checks input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }

/* ── Bloques ───────────────────────────────────────────────────── */
.cpdf-blocks { display: grid; gap: 10px; }

#app-container .cpdf-block {
    position: relative;
    background: var(--ap-surface-1);
    border: 0.5px solid var(--ap-separator);
    border-radius: var(--ap-r-md);
    transition: transform 0.5s var(--ap-ease-out), opacity var(--ap-med) var(--ap-ease), box-shadow var(--ap-med) var(--ap-ease), border-color var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-block:focus-within { border-color: var(--ap-separator-strong); }
.cpdf-block.entering { animation: cpdf-block-in 0.5s var(--ap-ease-out) both; }
.cpdf-block.dragging { opacity: 0.35; }

.cpdf-block.drop-before::before,
.cpdf-block.drop-after::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    border-radius: 3px;
    background: var(--ap-accent);
}

.cpdf-block.drop-before::before { top: -7px; }
.cpdf-block.drop-after::after { bottom: -7px; }

@keyframes cpdf-block-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }

.cpdf-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 0 6px;
    color: var(--ap-label-3);
}

.cpdf-block-head > .ap-icon { width: 15px; height: 15px; }
.cpdf-block-name { font-size: 12.5px; font-weight: 600; color: var(--ap-label-2); }

.cpdf-grip {
    display: grid;
    place-items: center;
    width: 22px;
    height: 28px;
    border-radius: 6px;
    cursor: grab;
}

.cpdf-grip:hover { background: rgba(255, 255, 255, 0.08); color: var(--ap-label-2); }
.cpdf-grip:active { cursor: grabbing; }
.cpdf-grip .ap-icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.cpdf-block-tools { display: flex; gap: 2px; margin-left: auto; }
#app-container .cpdf-block-tools .icon-btn { width: 28px; height: 28px; }
#app-container .cpdf-block-tools .icon-btn .ap-icon { width: 15px; height: 15px; }
#app-container .icon-btn:disabled { opacity: 0.28; cursor: default; background: none; }
#app-container .icon-btn.cpdf-danger:hover { color: var(--ap-red); background: rgba(255, 69, 58, 0.14); }

.cpdf-block-body { display: grid; gap: 10px; padding: 8px 14px 14px; }
.cpdf-block-body input[type="text"], .cpdf-block-body textarea { width: 100%; }
#app-container .cpdf-block-body textarea { min-height: 64px; resize: none; overflow: hidden; }
#app-container .cpdf-block[data-type="heading"] .cpdf-row > input { font-size: 17px; font-weight: 600; }
#app-container .cpdf-note { margin: 0; font-size: 13px; color: var(--ap-label-3); }

.cpdf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }

.cpdf-stat {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

#app-container .cpdf-stat input:first-child { font-size: 17px; font-weight: 650; padding-right: 34px; }
#app-container .cpdf-stat .icon-btn { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; }

.cpdf-table-wrap { overflow-x: auto; margin: 0 -2px; padding: 0 2px 2px; }
#app-container .cpdf-table { width: 100%; border-spacing: 4px; min-width: 360px; }
#app-container .cpdf-table th, #app-container .cpdf-table td { position: relative; padding: 0; }
#app-container .cpdf-table input { min-height: 34px; padding: 6px 10px; font-size: 14px; }
#app-container .cpdf-table th input { font-weight: 600; padding-right: 28px; background: rgba(200, 230, 0, 0.12); }
#app-container .cpdf-th-tools { width: 30px; }
#app-container .cpdf-th-tools .icon-btn { width: 28px; height: 28px; }

#app-container .cpdf-cell-x {
    position: absolute;
    right: 4px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    padding: 0;
    color: var(--ap-label-3);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-table th:hover .cpdf-cell-x,
#app-container .cpdf-cell-x:focus-visible { opacity: 1; }
#app-container .cpdf-cell-x:hover { color: var(--ap-red); background: rgba(255, 69, 58, 0.14); }
.cpdf-cell-x .ap-icon { width: 12px; height: 12px; }

#app-container .cpdf-drop {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 26px 16px;
    font-size: 13px;
    color: var(--ap-label-3);
    text-align: center;
    border: 1.5px dashed var(--ap-separator-strong);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--ap-fast) var(--ap-ease), background var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-drop strong { font-size: 14px; font-weight: 600; color: var(--ap-label); }
#app-container .cpdf-drop .ap-icon { width: 26px; height: 26px; margin-bottom: 4px; }
#app-container .cpdf-drop:hover, #app-container .cpdf-drop.over, #app-container .cpdf-drop:focus-within { border-color: var(--ap-accent); background: var(--ap-accent-soft); }

.cpdf-image { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: start; }
.cpdf-image img { width: 140px; max-height: 140px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#2c2c2e 0 25%, #1c1c1e 0 50%) 0 0 / 14px 14px; }
.cpdf-image-side { display: grid; gap: 10px; justify-items: start; }
.cpdf-image-side input { width: 100%; }

/* ── Añadir bloque ─────────────────────────────────────────────── */
.cpdf-add {
    margin-top: 4px;
    padding: 14px;
    border: 1px dashed var(--ap-separator-strong);
    border-radius: var(--ap-r-md);
}

.cpdf-add-label { display: block; margin: 0 2px 10px; font-size: 12.5px; font-weight: 600; color: var(--ap-label-3); }
.cpdf-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }

#app-container .cpdf-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ap-label);
    text-align: left;
    background: var(--ap-fill);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--ap-fast) var(--ap-ease), transform var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-add-btn .ap-icon { width: 16px; height: 16px; color: var(--ap-accent); }
#app-container .cpdf-add-btn:hover { background: var(--ap-fill-strong); }

/* ── Vista previa ──────────────────────────────────────────────── */
#app-container .cpdf-preview {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--tb-height) - 36px);
    padding: 0;
    overflow: hidden;
    background: var(--ap-surface-1);
    border: 0.5px solid var(--ap-separator);
    border-radius: var(--ap-r-lg);
}

.cpdf-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px 10px;
    font-size: 13px;
    border-bottom: 0.5px solid var(--ap-separator);
}

.cpdf-preview-head span { font-size: 12px; color: var(--ap-label-3); font-variant-numeric: tabular-nums; }

.cpdf-preview-stage {
    flex: 1;
    min-height: 320px;
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    overflow-y: auto;
    background: #0a0a0b;
}

.cpdf-preview-stage canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    animation: ap-fade-in 0.3s var(--ap-ease) both;
}

.cpdf-preview-stage iframe { width: 100%; height: 70vh; border: 0; border-radius: 4px; background: #fff; }
.cpdf-preview-wait { padding: 60px 16px; font-size: 13px; color: var(--ap-label-3); text-align: center; }

/* ── Biblioteca ────────────────────────────────────────────────── */
#app-container .cpdf-library h2 { margin: 8px 0 12px; font-size: 17px; }
#app-container .cpdf-library h2:not(:first-child) { margin-top: 32px; }

.cpdf-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }

#app-container .cpdf-template {
    display: grid;
    gap: 3px;
    padding: 12px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--ap-label-3);
    text-align: left;
    background: var(--ap-surface-1);
    border: 0.5px solid var(--ap-separator);
    border-radius: var(--ap-r-md);
    cursor: pointer;
    transition: transform var(--ap-med) var(--ap-ease-out), border-color var(--ap-fast) var(--ap-ease), background var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-template strong { font-size: 14px; font-weight: 600; color: var(--ap-label); }
#app-container .cpdf-template:hover { transform: translateY(-3px); border-color: var(--ap-separator-strong); background: var(--ap-surface-2); }
#app-container .cpdf-template:active { transform: scale(0.98); }

.cpdf-template-art {
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    padding: 14px 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.cpdf-template-art svg {
    width: 62px;
    height: 72px;
    padding: 0;
    color: #b9b9c0;
    fill: currentColor;
    background: #f4f4f6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform var(--ap-med) var(--ap-ease-out);
}

.cpdf-template-art svg .accent { fill: #b4cf00; }
.cpdf-template:hover .cpdf-template-art svg { transform: rotate(-3deg) scale(1.05); }

.cpdf-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

#app-container .cpdf-doc {
    display: flex;
    flex-direction: column;
    background: var(--ap-surface-1);
    border: 0.5px solid var(--ap-separator);
    border-radius: var(--ap-r-md);
    overflow: hidden;
    transition: border-color var(--ap-fast) var(--ap-ease), background var(--ap-fast) var(--ap-ease);
}

#app-container .cpdf-doc:hover { border-color: var(--ap-separator-strong); background: var(--ap-surface-2); }

#app-container .cpdf-doc-open {
    flex: 1;
    display: grid;
    gap: 3px;
    align-content: start;
    padding: 14px 16px 10px;
    font-size: 13px;
    color: var(--ap-label-2);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

#app-container .cpdf-doc-open strong { font-size: 15px; font-weight: 600; color: var(--ap-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-container .cpdf-doc-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-container .cpdf-doc-open small { margin-top: 6px; font-size: 12px; color: var(--ap-label-3); }
.cpdf-doc-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 0 8px 8px; }

.cpdf-empty {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 36px 16px;
    font-size: 13.5px;
    color: var(--ap-label-3);
    text-align: center;
    border: 1px dashed var(--ap-separator-strong);
    border-radius: var(--ap-r-md);
}

.cpdf-empty strong { font-size: 15px; font-weight: 600; color: var(--ap-label-2); }

/* ── Deshacer ──────────────────────────────────────────────────── */
.cpdf-undo {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 9200;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 16px;
    font-size: 14px;
    color: var(--ap-label);
    background: var(--ap-material-thick);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 0.5px solid var(--ap-separator-strong);
    border-radius: 999px;
    box-shadow: var(--ap-shadow-3);
    transform: translateX(-50%);
    animation: cpdf-undo-in 0.45s var(--ap-spring) both;
}

.cpdf-undo.leaving { animation: cpdf-undo-out 0.2s var(--ap-ease) both; }

.cpdf-undo button {
    min-height: 30px;
    padding: 4px 12px;
    font: inherit;
    font-weight: 600;
    color: var(--ap-accent);
    background: var(--ap-accent-soft);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

@keyframes cpdf-undo-in { from { opacity: 0; transform: translate(-50%, 24px); } }
@keyframes cpdf-undo-out { to { opacity: 0; transform: translate(-50%, 12px); } }

@media (max-width: 1100px) {
    .cpdf-editor { grid-template-columns: minmax(0, 1fr); }
    #app-container .cpdf-preview { position: static; max-height: 70vh; }
}

@media (max-width: 600px) {
    .cpdf-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .cpdf-image { grid-template-columns: minmax(0, 1fr); }
    .cpdf-bar-actions { width: 100%; }
    .cpdf-bar-actions .btn { flex: 1; }
    #app-container .cpdf-block-tools .icon-btn { width: 36px; height: 36px; }
}

.cpdf-grid-2 { margin-bottom: 12px; }
.cpdf-grid-2:last-child { margin-bottom: 0; }
.cpdf-grid-2 > .cpdf-field { margin-bottom: 0; align-content: start; }
.cpdf-block-body > .btn { justify-self: start; }
.cpdf-block-body > .ap-segmented { justify-self: start; }