/* contenedor-tema (lleva las CSS variables) */
.contact-theme {
    background: var(--ct-bg, transparent);
    color: var(--ct-text, inherit);
    border: 1px solid var(--ct-accent, transparent);
    border-radius: .5rem;
    padding: 1rem;
}

    /* campos */
    .contact-theme input,
    .contact-theme select,
    .contact-theme textarea {
        /*color: var(--ct-text, inherit);*/
        border: 1px solid var(--ct-accent, #ced4da);
    }

        /* foco */
        .contact-theme input:focus,
        .contact-theme select:focus,
        .contact-theme textarea:focus {
            outline: none;
            box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ct-accent, #2684ff) 25%, transparent);
            border-color: var(--ct-accent, #2684ff);
        }

    /* labels/ayudas */
    .contact-theme label,
    .contact-theme .form-text {
        color: var(--ct-text, inherit);
    }

    /* botón (sobrescribe .btn-template-main de tu tema) */
    .contact-theme .btn-template-main {
        background: var(--ct-accent) !important;
        border-color: var(--ct-accent) !important;
        color: #fff !important;
    }

        .contact-theme .btn-template-main:hover {
            filter: brightness(.95);
        }



/* Layout HOR: 2 columnas cuando hay espacio */
.contact-hor {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

    /* MUY importante en flex: permite que el contenido no “empuje” y desborde */
    .contact-hor > * {
        flex: 1 1 0;
        min-width: 0;
    }

/* El lado del editor: asegurar que si hay cosas largas, rompan */
.contact-hor__side {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Breakpoint: cuando no quepa, apila */
@media (max-width: 1439.98px) {
    .contact-hor {
        flex-direction: column;
    }

        .contact-hor > * {
            flex: 1 1 auto;
        }
}

/* Cualquier iframe dentro del HTML del editor */
.contact-hor__side iframe,
.editor-html iframe {
    max-width: 100%;
}

/* Si es un embed típico (Google Maps) */
.contact-hor__side iframe {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16/9; /* ajusta si quieres 4/3 */
    display: block;
    border: 0;
}

/* Dentro del panel derecho del HOR: imágenes siempre responsivas */
.contact-hor__side img {
    max-width: 100% !important;
    height: auto !important;
    display: block; /* evita baseline/espacios raros */
    margin: 0.5rem auto; /* centrada */
}

/* Extra (recomendado): que el contenido del editor pueda “encoger” dentro del flex */
.contact-hor__side {
    min-width: 0;
}

    /* Si el editor mete cosas muy “anchas” (URLs largas, etc.) */
    .contact-hor__side * {
        max-width: 100%;
    }