/* Fase 12 — endurecimiento visual y responsive */

html,
body {
    max-width: 100%;
}

.contact-grid > *,
.footer-grid > *,
.editor-panel-main,
.editor-panel-content {
    min-width: 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.editor-field input,
.editor-field select,
.editor-field textarea {
    max-width: 100%;
}

.lightbox {
    overflow: auto;
    overscroll-behavior: contain;
}

@media (max-height: 620px) {
    .lightbox {
        padding-block: 10px;
        align-items: flex-start;
    }

    .lightbox figure {
        max-height: none;
        padding-block: 58px 18px;
    }

    .lightbox img {
        max-height: calc(100dvh - 110px);
    }

    .editor-modal {
        align-items: flex-start;
        padding-block: 8px;
    }

    .editor-login-card {
        margin-block: auto;
    }
}

@media (max-width: 640px) {
    .lightbox {
        padding: 10px;
    }

    .lightbox figure {
        max-width: calc(100vw - 20px);
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
    }

    .lightbox-prev {
        left: 12px;
    }

    .lightbox-next {
        right: 12px;
    }

    .contact-direct > a,
    .contact-location {
        min-width: 0;
    }

    .contact-direct strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal,
    .editor-modal-card,
    .editor-panel-shell {
        transition-duration: 0.01ms !important;
    }
}


.editor-registration-locked {
    margin-top: 26px;
    padding: 20px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--color-line);
    border-radius: 18px;
    background: var(--color-surface-2);
}

.editor-registration-locked strong {
    color: var(--color-text);
    font-size: 1.05rem;
}

.editor-registration-locked p {
    margin: 0 0 6px;
    color: var(--color-muted);
}

.editor-registration-locked .button {
    width: max-content;
    max-width: 100%;
}


/* El panel tiene menos ancho útil que la ventana completa.
   Estos cortes responden al contenedor real del editor. */
@container dj-editor-main (max-width: 760px) {
    .editor-phase8-media-grid,
    .editor-phase9-block-grid,
    .editor-phase10-logo-grid,
    .editor-phase11-detail-grid,
    .editor-phase11-lead {
        grid-template-columns: 1fr;
    }

    .editor-phase10-logo-box {
        width: min(100%, 280px);
        max-width: 280px;
    }

    .editor-phase11-detail-field.is-wide {
        grid-column: auto;
    }
}

@container dj-editor-main (max-width: 560px) {
    .editor-phase10-social-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .editor-phase10-social-icon {
        justify-self: start;
    }
}