/* ===================================================================
   EFICÁCIA CRM — mod-enquadrar.css · O EDITOR DE ENQUADRAMENTO DA CAPA

   A foto fica quieta e escurecida; a janela clara é o recorte real e é ela
   que anda. Ver o cabeçalho de `mod-enquadrar.js` para o porquê.

   Tokens da casa (`design-system.css`) em tudo — nenhuma cor literal.
   =================================================================== */

.enq-casca {
    position: fixed;
    inset: 0;
    /* Acima do modal da ficha (`z-index` 1000 na casca do motor): o editor
       abre POR CIMA da ficha, não ao lado. */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4, 16px);
}

.enq-fundo {
    position: absolute;
    inset: 0;
    /* NEUTRO, e nao o vermelho da casa como no resto dos modais. Aqui
       julga-se uma FOTOGRAFIA: qualquer tinta a volta contamina a leitura
       das cores e faz decidir mal o enquadramento. */
    background: #000;
    opacity: .6;
}

.enq-painel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
    width: min(920px, 100%);
    max-height: 92vh;
    padding: var(--sp-4, 16px);
    background: var(--surface, #fff);
    color: var(--text-1, #111);
    border-radius: var(--r-xl, 16px);
    box-shadow: 0 24px 64px rgba(26, 5, 5, .34);
    overflow: auto;
}

.enq-topo {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
}

.enq-titulo {
    margin: 0;
    font-size: var(--txt-lg, 18px);
    font-weight: var(--fw-bold, 700);
    /* O título leva o nome do suporte, que é longo e não pode empurrar o
       botão de fechar para fora do painel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.enq-x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--r-md, 8px);
    background: transparent;
    color: var(--text-2, #555);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.enq-x:hover {
    background: var(--surface-sunken, #f1f1f1);
}

.enq-ajuda {
    margin: 0;
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #555);
}

/* ---------- o palco: foto + máscara + janela ---------- */

.enq-palco {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--surface-sunken, #f1f1f1);
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
    /* Sem isto o arrasto no telemóvel rolava a página em vez de mover a
       janela — o gesto é o mesmo e o browser fica com ele primeiro. */
    touch-action: none;
    user-select: none;
}

.enq-foto {
    display: block;
    max-width: 100%;
    /* A foto INTEIRA tem de caber: é essa a promessa do editor. `contain`
       pela via do `max-height`, para o painel não crescer sem fim numa
       fotografia vertical. */
    max-height: 54vh;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

/* A JANELA É UM BURACO, não uma camada por cima.

   A primeira versão punha uma máscara vermelha (`--brand-950`) sobre a foto
   toda e clareava a janela com `backdrop-filter: brightness()`. O resultado
   era um editor onde TUDO se via avermelhado — incluindo a área que
   supostamente mostra como a capa vai ficar. Num editor de fotografia isso
   é o defeito mais grave possível: a pré-visualização mentia sobre as cores,
   e quem enquadrasse estaria a decidir sobre uma imagem que não existe.

   Agora a janela é transparente de verdade e o escurecimento vem de uma
   sombra enorme espalhada a partir dela — uma só camada, sem costuras entre
   quatro retângulos a tentar rodear um buraco, e a foto dentro da janela
   exatamente com as cores que vai ter na capa. O `overflow:hidden` do palco
   é que apara a sombra. */
.enq-janela {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 2px;
    background: transparent;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68);
    cursor: grab;
}

.enq-janela.is-arrastar {
    cursor: grabbing;
}

/* O foco marca-se por FORA da moldura branca e em fino: a janela recebe
   foco por programa ao abrir o editor, e um anel vermelho grosso colado ao
   recorte competia com a fotografia — que é a única coisa que aqui se
   está a julgar. */
.enq-janela:focus-visible {
    outline: 2px solid var(--brand-500, #DA0A0D);
    outline-offset: 3px;
}

/* A GRELHA é a dos terços — a mesma que qualquer máquina fotográfica mostra.
   Não é enfeite: dá ao olho onde pousar o suporte dentro do recorte. */
.enq-grelha {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .55) 1px, transparent 1px);
    background-size: 33.333% 100%, 100% 33.333%;
    background-position: 33.333% 0, 0 33.333%;
    background-repeat: repeat-x, repeat-y;
    opacity: .75;
}

/* Quando o zoom passa a resolução da foto, a moldura passa a avisar por si —
   quem está a arrastar olha para a janela, não para o texto por baixo. */
.enq-janela.is-mole {
    border-color: var(--warning-500, #f59e0b);
}

/* ---------- controlos ---------- */

.enq-controlos {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
}

.enq-zoom {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
}

.enq-zoom-rot {
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #555);
    flex: 0 0 auto;
}

.enq-zoom input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--brand-500, #DA0A0D);
}

.enq-zoom-val {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #555);
}

.enq-nitidez {
    margin: 0;
    font-size: var(--txt-sm, 13px);
    color: var(--warning-700, #b45309);
    background: var(--warning-50, #fffbeb);
    border-left: 3px solid var(--warning-500, #f59e0b);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--r-sm, 6px);
}

/* O erro de gravacao vive ao pe do botao em que se carregou — nao num toast
   que pode passar despercebido nem, pior, em lado nenhum. Nao desaparece
   sozinho: quem carregou em «Guardar» tem de saber que nao guardou. */
.enq-erro {
    margin: 0;
    font-size: var(--txt-sm, 13px);
    color: var(--danger-700, #b91c1c);
    background: var(--danger-50, #fef2f2);
    border-left: 3px solid var(--danger-500, #ef4444);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--r-sm, 6px);
}

.enq-rodape {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    flex-wrap: wrap;
}

.enq-espaco {
    flex: 1 1 auto;
}

/* A página por baixo não rola enquanto o editor está aberto. */
body.enq-aberto {
    overflow: hidden;
}

/* ---------- o botão que abre isto, sobre a própria capa ---------- */

.meq-capa-enq {
    position: absolute;
    right: var(--sp-3, 12px);
    bottom: var(--sp-3, 12px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44 px de altura: e o alvo de toque que o proprio gate da casa exige
       abaixo dos 768 px (`responsive-audit.js` check 4). Media 28 e passava
       despercebido porque o gate mede a FICHA, nao este botao, que so
       existe depois de a capa aparecer. Fica 44 em todo o lado — no rato
       nao custa nada, e um alvo confortavel nunca foi defeito. */
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-md, 8px);
    background: rgba(26, 5, 5, .62);
    color: #fff;
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    /* Discreto até fazer falta: aparece ao passar o rato pela capa. No
       telemóvel não há `hover`, por isso a regra de toque abaixo mantém-no
       sempre visível — um botão que só aparece com o rato é um botão que
       não existe em metade dos ecrãs. */
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.ds-ficha-simbolo--capa:hover .meq-capa-enq,
.meq-capa-enq:focus-visible {
    opacity: 1;
}

.meq-capa-enq:hover {
    background: rgba(26, 5, 5, .8);
}

@media (hover: none) {

    .meq-capa-enq {
        opacity: 1;
    }
}

/* ---------- telemóvel ---------- */

@media (max-width: 640px) {

    .enq-casca {
        padding: 0;
        align-items: flex-end;
    }

    .enq-painel {
        width: 100%;
        max-height: 96vh;
        border-radius: var(--r-xl, 16px) var(--r-xl, 16px) 0 0;
    }

    .enq-foto {
        max-height: 42vh;
    }

    /* Guardar é a ação principal e fica à largura toda, acima do resto:
       num ecrã estreito os três botões em linha ficavam com 90 px cada. */
    .enq-rodape {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .enq-rodape .ds-btn {
        width: 100%;
        justify-content: center;
    }

    .enq-espaco {
        display: none;
    }
}