/* ============================================================
   EDITOR VISUAL — psicologiaconyanis (v2)
   Este CSS SOLO añade la interfaz del editor.
   No modifica el diseño original de la web salvo cuando
   el propio usuario decide cambiar algo en modo edición.
   ============================================================ */

#pce-editor-fab,
#pce-editor-fab * ,
#pce-mini-toolbar,
#pce-mini-toolbar *,
#pce-colors-panel,
#pce-colors-panel *,
#pce-secbg-popover,
#pce-secbg-popover *,
#pce-toast,
.pce-img-controls,
.pce-img-controls *,
.pce-secbg-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

/* --- Botón principal y panel de acciones --- */
#pce-editor-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 999999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
}

#pce-toggle-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #4a3e3d;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
#pce-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.32); }
#pce-toggle-btn:active { transform: translateY(0); }
#pce-toggle-btn.pce-on { background: #b23b3b; }

.pce-fab-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: rgba(43, 35, 32, 0.96);
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(0,0,0,.3);
    backdrop-filter: blur(6px);
}
body.pce-edit-active .pce-fab-panel { display: flex; }

.pce-fab-panel button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: transform .15s ease, filter .2s ease;
}
.pce-fab-panel button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.pce-fab-panel button:active { transform: translateY(0); }

#pce-save-btn   { background: #4a8b56; }
#pce-colors-btn { background: #7d6459; }
#pce-reset-btn  { background: #8a6a6a; }
#pce-export-btn,#pce-import-btn { background: #3d5a80; }

/* --- Resaltado de elementos editables (texto) --- */
body.pce-edit-active [data-pce-text]:hover {
    outline: 2px dashed #7d6459;
    outline-offset: 2px;
    background: rgba(125, 100, 89, 0.08);
    cursor: text;
}
body.pce-edit-active [data-pce-text]:focus {
    outline: 2px solid #4a8b56;
    outline-offset: 2px;
    background: rgba(74, 139, 86, 0.08);
}

/* --- Imágenes editables --- */
.pce-img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.pce-img-wrap > img { display: block; }

body.pce-edit-active .pce-img-wrap {
    outline: 2px dashed #7d6459;
    outline-offset: 3px;
    border-radius: 4px;
}

.pce-img-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: none;
    gap: 6px;
    z-index: 5;
}
body.pce-edit-active .pce-img-wrap .pce-img-controls { display: flex; }

.pce-img-btn {
    all: unset;
    background: rgba(0,0,0,.72);
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: background .2s ease, transform .15s ease;
}
.pce-img-btn:hover { background: rgba(0,0,0,.9); transform: translateY(-1px); }

/* --- Elementos reordenables --- */
body.pce-edit-active [data-pce-drag] {
    cursor: grab;
    position: relative;
}
body.pce-edit-active [data-pce-drag]::before {
    content: "⠿ mover";
    position: absolute;
    top: 4px;
    left: 4px;
    background: #4a3e3d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    z-index: 6;
    pointer-events: none;
    opacity: .85;
}
[data-pce-drag].pce-dragging { opacity: .4; }
[data-pce-drag].pce-drag-over { outline: 3px solid #4a8b56 !important; }

/* --- Fondos de sección --- */
.pce-bg-anchor {
    position: relative;
}

.pce-secbg-btn {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: rgba(61, 90, 128, 0.88);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: transform .15s ease, background .2s ease;
    white-space: nowrap;
}
body.pce-edit-active .pce-bg-anchor > .pce-secbg-btn { display: inline-flex; }
.pce-secbg-btn:hover { background: rgba(61, 90, 128, 1); transform: translateY(-1px); }

body.pce-edit-active .pce-bg-anchor {
    outline: 2px dashed rgba(61, 90, 128, 0.55);
    outline-offset: -2px;
}

/* Cuando la sección tiene foto de fondo puesta por el editor */
.pce-has-bg {
    background-attachment: scroll;
}

/* Aclara el texto de una sección para que se lea sobre la foto de fondo */
.pce-text-light,
.pce-text-light * {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.pce-text-light .btn-main,
.pce-text-light .btn-nav,
.pce-text-light button[class*="btn-"] {
    text-shadow: none;
}

#pce-secbg-popover {
    position: fixed;
    z-index: 999998;
    width: 270px;
    background: #fff;
    color: #2c2c2c;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.32);
    display: none;
}
#pce-secbg-popover.pce-show { display: block; }

.pce-secbg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pce-secbg-head strong {
    font-size: 13.5px;
    line-height: 1.3;
}
.pce-secbg-close {
    all: unset;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    padding: 2px 6px;
}
.pce-secbg-close:hover { color: #333; }

.pce-secbg-preview {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-color: #f1ede8;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px dashed #d8cfc7;
}
.pce-secbg-preview.pce-has-preview { border-style: solid; border-color: transparent; }
.pce-secbg-preview-empty {
    font-size: 11.5px;
    color: #a89a90;
}

.pce-secbg-upload {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    background: #3d5a80;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: filter .2s ease;
}
.pce-secbg-upload:hover { filter: brightness(1.1); }

.pce-secbg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}
.pce-secbg-row input[type="range"] { width: 130px; }

.pce-secbg-check-row {
    cursor: pointer;
    align-items: flex-start;
    justify-content: flex-start;
}
.pce-secbg-check-row input { margin-top: 2px; }
.pce-secbg-check-row span { line-height: 1.4; }

.pce-secbg-remove {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    background: #f3e6e6;
    color: #a13d3d;
    padding: 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s ease;
}
.pce-secbg-remove:hover { background: #ecd6d6; }

/* --- Mini barra de color por elemento --- */
#pce-mini-toolbar {
    position: fixed;
    z-index: 999998;
    background: #2b2320;
    border-radius: 10px;
    padding: 8px 10px;
    display: none;
    gap: 10px;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#pce-mini-toolbar.pce-show { display: flex; }
#pce-mini-toolbar label {
    color: #fff;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
#pce-mini-toolbar input[type="color"] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: none;
    cursor: pointer;
}
#pce-mini-toolbar button.pce-clear {
    all: unset;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

/* --- Panel de colores globales --- */
#pce-colors-panel {
    position: fixed;
    bottom: 90px;
    right: 22px;
    z-index: 999998;
    background: #fff;
    color: #2c2c2c;
    border-radius: 14px;
    padding: 18px;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
    display: none;
}
#pce-colors-panel.pce-show { display: block; }
#pce-colors-panel h4 {
    margin: 0 0 4px;
    font-size: 15px;
}
#pce-colors-panel .pce-colors-hint {
    margin: 0 0 12px;
    font-size: 11.5px;
    color: #97897f;
}
#pce-colors-panel .pce-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}
#pce-colors-panel .pce-row span { font-size: 12px; }
#pce-colors-panel input[type="color"] {
    width: 34px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

/* --- Toast de aviso --- */
#pce-toast {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 999999;
    background: #2b2320;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
    pointer-events: none;
    max-width: 320px;
}
#pce-toast.pce-show { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
    #pce-toggle-btn { padding: 11px 16px; font-size: 12.5px; }
    .pce-fab-panel button { padding: 9px 14px; font-size: 12px; }
    #pce-colors-panel { width: calc(100vw - 44px); right: 12px; bottom: 84px; }
    #pce-secbg-popover { width: calc(100vw - 24px); }
    #pce-toast { left: 12px; right: 12px; max-width: none; bottom: 88px; }
    .pce-secbg-btn { top: 8px; right: 8px; padding: 7px 11px; font-size: 11.5px; }
}

@media print {
    #pce-editor-fab, #pce-mini-toolbar, #pce-colors-panel, #pce-toast, #pce-secbg-popover, .pce-secbg-btn, .pce-img-controls { display: none !important; }
}