/*
 * Imágenes: máscara del recorte, capa del modo recorte, destino de arrastre y
 * ajustes del diálogo Formato de imagen.
 *
 * Todas las clases propias llevan el prefijo `pic-`; las dos reglas sobre
 * `.shape--picture` completan el render de `layout/slideview.js`, que coloca la
 * imagen ampliada y desplazada cuando hay recorte y necesita que el marco la
 * recorte de verdad.
 */

/* El recorte enmascara: lo que sobresale del marco no se ve. */
.shape--picture {
    overflow: hidden;
}

.shape--picture .shape__img {
    /* La imagen no debe capturar el arrastre nativo del navegador. */
    -webkit-user-drag: none;
}

/* ---------- Modo recorte ---------- */

.layer.pic-crop {
    pointer-events: auto;
    cursor: default;
    z-index: 5;
}

/* La imagen completa, atenuada: muestra lo que el recorte deja fuera. */
.pic-crop__ghost {
    position: absolute;
    opacity: 0.4;
    user-select: none;
    -webkit-user-drag: none;
}

/* La parte visible, a plena luz y alineada con la imagen atenuada. */
.pic-crop__window {
    position: absolute;
    background-repeat: no-repeat;
    outline: 1px solid #FFFFFF;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
}

.pic-crop__handle {
    position: absolute;
    background: #000000;
    box-shadow: 0 0 0 1px #FFFFFF;
    transform: translate(-50%, -50%);
}

/* Esquinas: marcas en ángulo, como los tiradores de recorte de PowerPoint. */
.pic-crop__handle--nw,
.pic-crop__handle--ne,
.pic-crop__handle--sw,
.pic-crop__handle--se {
    width: 14px;
    height: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 100%, 0 100%);
}

.pic-crop__handle--ne { transform: translate(-50%, -50%) rotate(90deg); }
.pic-crop__handle--se { transform: translate(-50%, -50%) rotate(180deg); }
.pic-crop__handle--sw { transform: translate(-50%, -50%) rotate(270deg); }

.pic-crop__handle--n,
.pic-crop__handle--s {
    width: 18px;
    height: 5px;
}

.pic-crop__handle--w,
.pic-crop__handle--e {
    width: 5px;
    height: 18px;
}

.pic-crop__handle--nw { cursor: nwse-resize; }
.pic-crop__handle--se { cursor: nwse-resize; }
.pic-crop__handle--ne { cursor: nesw-resize; }
.pic-crop__handle--sw { cursor: nesw-resize; }
.pic-crop__handle--n,
.pic-crop__handle--s { cursor: ns-resize; }
.pic-crop__handle--w,
.pic-crop__handle--e { cursor: ew-resize; }

/* ---------- Arrastrar archivos sobre el lienzo ---------- */

.is-drop-target {
    outline: 2px dashed var(--ppt-accent, #B7472A);
    outline-offset: -4px;
}

/* El selector de archivos existe pero nunca se ve: se abre con `click()`. */
.pic-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Diálogo Formato de imagen ---------- */

.dialog--picture {
    min-width: 340px;
}

.dialog--picture .dialog__section {
    margin: 10px 0 4px;
    font-weight: 600;
    color: var(--ppt-text, #201F1E);
}

.dialog--picture .field--hint {
    color: var(--ppt-text-muted, #605E5C);
    font-size: 11px;
}