/* Foto 3x4: foto com a seleção travada na proporção e a prévia do resultado ao lado */

.foto-area {
    display: none;
    margin-top: 20px;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

    .foto-area.visible {
        display: flex;
    }

.foto-recorte {
    position: relative;
    max-width: 100%;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    background: #F9FAFB;
    touch-action: none; /* no celular, arrastar move a seleção em vez de rolar a página */
    line-height: 0;
}

    .foto-recorte #previewImage {
        display: block;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 11px;
        user-select: none;
        -webkit-user-drag: none;
    }

/* Seleção: escurece o que fica de fora (sombra gigante) para destacar o enquadramento */
.caixa-3x4 {
    display: none;
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.55);
    cursor: move;
    box-sizing: border-box;
    touch-action: none;
}

.foto-recorte {
    overflow: hidden;
}

.guia-rosto {
    position: absolute;
    left: 22%;
    right: 22%;
    top: 12%;
    height: 58%;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    pointer-events: none;
}

.caixa-3x4 .handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #FBBF24;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

    .caixa-3x4 .handle::after {
        content: "";
        position: absolute;
        inset: -12px; /* área de toque maior que o círculo */
    }

    .caixa-3x4 .handle.nw { top: -8px; left: -8px; cursor: nwse-resize; }
    .caixa-3x4 .handle.ne { top: -8px; right: -8px; cursor: nesw-resize; }
    .caixa-3x4 .handle.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
    .caixa-3x4 .handle.se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.foto-previa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 170px;
}

    .foto-previa span {
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
    }

    .foto-previa canvas {
        border: 1px solid #D1D5DB;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.foto-dica {
    font-size: 0.8rem;
    color: #6B7280;
    text-align: center;
    margin: 0;
}

/* Página mais larga que as outras ferramentas, para a prévia caber ao lado da foto */
.containercontroles.foto3x4 {
    max-width: 900px;
}

    .containercontroles.foto3x4 .formulariocontroles,
    .containercontroles.foto3x4 .drop-zone,
    .containercontroles.foto3x4 .introducao {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

.foto-recorte {
    max-width: min(100%, 660px);
}