/* Editor de collages dentro de Copias (sandbox index-v2.html, 08-11-2026) */
#tab_carro_item .order-area { position: relative; }
#ec-botones { position: absolute; right: 0; top: 4px; display: flex; gap: 8px; z-index: 5; }
.ec-boton { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid #111; background: #fff; cursor: pointer;
    display: grid; place-items: center; border-radius: 0; }
.ec-boton:hover, .ec-boton:focus-visible { background: #f3f3f3; outline: none; }
.ec-boton[aria-current="true"] { background: #e6e6e6; cursor: default; }
.ec-mini { display: grid; gap: 2px; width: 20px; height: 26px; padding: 2px; box-sizing: border-box; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ec-mini i { background: #a1a1a1; display: block; }
.ec-tip { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; padding: 8px 10px; background: #111; color: #fff;
    font-size: 13px; line-height: 1.35; text-align: left; letter-spacing: .2px; font-weight: 400; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 10; }
.ec-boton:hover .ec-tip, .ec-boton:focus-visible .ec-tip { opacity: 1; visibility: visible; }
@media (max-width: 767px) { #ec-botones { display: none !important; } }

/* celular: dentro del panel de Preferencias que se desliza desde la izquierda */
#ec-panel { margin: 22px 0 8px 0; padding-top: 14px; border-top: 1px solid #ccc; }

/* "Tus fotos": el checkbox de cada imagen con fondo blanco cuando no está elegida (Jorge, 09-11) */
#grid-photos-copy .checkbox input:not(:checked) + label:before,
#list-photos .checkbox input:not(:checked) + label:before { background-color: #fff !important; border-color: #111 !important; }
#ec-panel .ec-op { display: flex !important; align-items: center; gap: 12px; }
#ec-panel .ec-op small { display: block; font-size: 13px; color: #777; line-height: 1.3; }
#ec-panel .ec-op b { font-weight: 600; color: #222; }
@media (min-width: 768px) { #ec-panel { display: none !important; } }

/* celular: el menú de Copias con tres puntitos en vez de tres rayas, igual que Canvas (Jorge, 09-11; copia de style-enmarcados.css) */
@media only screen and (max-width: 767px) {
    .menu-btn:before { border-radius: 5px; width: 4px; height: 4px; background: transparent;
        box-shadow: 0 4px #111, 0 4px #fff, 0 12px #111, 0 12px #fff, 0 19px #111; }
}

/* celular (Jorge, 09-11): logo de Copias de 190 px y el carrito un poco más arriba y más a la derecha */
@media only screen and (max-width: 767px) {
    #mp-logo-link .logo { width: 190px !important; height: auto !important; }
    .show-mobile .sel_carro { top: 2px !important; right: 25px !important; }
}

/* capa a pantalla completa con el editor; Copias queda abierta debajo */
#ec-capa { position: fixed; inset: 0; z-index: 2147483000; background: #f6f5f3; }
#ec-capa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* rueda mientras carga el editor (Jorge, 10-11) */
#ec-capa .ec-cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: #f6f5f3; font-family: 'Titillium Web', sans-serif; font-size: 17px; color: #111; }
#ec-capa .ec-cargando b { font-weight: 600; letter-spacing: .3px; }
#ec-capa .ec-rueda { width: 38px; height: 38px; border: 3px solid #ddd; border-top-color: #111; border-radius: 50%; animation: ec-rueda .8s linear infinite; }
@keyframes ec-rueda { to { transform: rotate(360deg); } }
html.ec-abierto, html.ec-abierto body { overflow: hidden !important; }