/* ==========================================================================
   Bloque Sección Mapa - Estilos principales
   ========================================================================== */
.seccion-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--seccion-mapa-color, var(--color-principal, #E42153));
    border-radius: 12px;
    padding: 38px 40px;
    box-sizing: border-box;
    width: 100%;
}
.seccion-mapa__container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 70px;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
}

/* Bloque izquierdo - Información */
.seccion-mapa__bloque-izquierdo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
    width: 456px;
    max-width: 100%;
    flex-shrink: 0;
}

/* Icono de ubicación - SVG como background-image para evitar filtros de multisite */
.seccion-mapa__icono {
    width: 31px;
    height: 29px;
    aspect-ratio: 31 / 29;
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='29' viewBox='0 0 31 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.54806 5.41717C9.54806 2.4396 12.2088 0 15.5208 0C18.8328 0 21.4797 2.4396 21.4797 5.41717C21.4797 7.84426 19.7059 9.92105 17.2392 10.5716V18.3909C17.2392 21.2934 16.1998 23.5453 15.5208 23.5453C14.8418 23.5453 13.7747 21.2934 13.7747 18.3909V10.5716C11.3219 9.89603 9.54806 7.84426 9.54806 5.41717ZM13.8301 5.72994C14.9665 5.72994 15.8811 4.8667 15.8811 3.87834C15.8811 2.87748 14.9665 2.03926 13.8301 2.03926C12.7492 2.03926 11.793 2.87748 11.793 3.87834C11.793 4.8667 12.7492 5.72994 13.8301 5.72994ZM15.4931 29C5.97273 29 0 26.2101 0 22.6445C0 19.1665 5.58471 16.777 11.2526 16.4016V19.2416C7.53867 19.5043 3.72776 20.7679 3.72776 22.4694C3.72776 24.6337 8.63344 26.0725 15.4931 26.0725C22.3527 26.0725 27.2722 24.6212 27.2722 22.4694C27.2722 20.7679 23.4613 19.5043 19.7474 19.2416V16.4016C25.4153 16.777 31 19.1665 31 22.6445C31 26.2101 25.0134 29 15.4931 29Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Título */
.seccion-mapa__titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}

/* Dirección */
.seccion-mapa__direccion {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #fff;
    opacity: 0.5;
    margin: 0;
}

/* Horarios wrapper */
.seccion-mapa__horarios-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    width: 100%;
}

/* Horarios */
.seccion-mapa__horarios {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    margin: 0;
    width: 456px;
    max-width: 100%;
}

/* Bloque derecho - Contenedor del mapa */
.seccion-mapa__bloque-derecho {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 430px;
    max-width: 100%;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 6px;
    padding: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Contenedor del mapa */
.seccion-mapa__mapa-contenedor {
    width: 100%;
    height: 358px;
    background-color: #bbb;
    border-radius: 0;
    overflow: hidden;
}

/* Canvas del mapa */
.seccion-mapa__mapa-canvas {
    width: 100%;
    height: 100%;
    min-height: 358px;
}

/* ==========================================================================
   Responsive - Tablet y móvil
   ========================================================================== */
@media (max-width: 1023px) {
    .seccion-mapa {
        padding: 30px 20px;
    }
    .seccion-mapa__container {
        flex-direction: column;
        gap: 30px;
    }
    .seccion-mapa__bloque-izquierdo {
        width: 100%;
        padding-top: 0;
        gap: 12px;
    }

    /* Icono de ubicación */
    .seccion-mapa__icono {
        width: 27px;
        height: 25px;
    }
    .seccion-mapa__titulo {
        font-size: 28px;
    }
    .seccion-mapa__direccion {
        font-size: 18px;
    }
    .seccion-mapa__horarios-wrapper {
        padding-top: 5px;
    }
    .seccion-mapa__horarios {
        font-size: 14px;
        width: 100%;
    }
    .seccion-mapa__bloque-derecho {
        width: 100%;
        max-width: 100%;
    }
    .seccion-mapa__mapa-contenedor {
        height: 280px;
    }
    .seccion-mapa__mapa-canvas {
        min-height: 280px;
    }
}

@media (max-width: 782px) {
    .seccion-mapa {
        padding: 25px 15px;
    }
    .seccion-mapa__container {
        gap: 25px;
    }
    .seccion-mapa__titulo {
        font-size: 24px;
    }
    .seccion-mapa__direccion {
        font-size: 16px;
    }
    .seccion-mapa__mapa-contenedor {
        height: 220px;
    }
    .seccion-mapa__mapa-canvas {
        min-height: 220px;
    }
}

/* ==========================================================================
   Estilos del editor
   ========================================================================== */
.seccion-mapa--editor [data-rich-text-placeholder] {
    opacity: 0.6;
}
.seccion-mapa--editor .seccion-mapa__mapa-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: #f0f0f0;
    border-radius: 4px;
    min-height: 280px;
}
.seccion-mapa--editor .seccion-mapa__mapa-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.seccion-mapa--editor .seccion-mapa__mapa-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #1e1e1e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.seccion-mapa--editor .seccion-mapa__mapa-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #949494;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.seccion-mapa--editor .seccion-mapa__mapa-input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}
.seccion-mapa--editor .seccion-mapa__mapa-input--error {
    border-color: #d63638;
}
.seccion-mapa--editor .seccion-mapa__mapa-help {
    font-size: 11px;
    color: #757575;
}
.seccion-mapa--editor .seccion-mapa__mapa-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: auto;
}
.seccion-mapa--editor .seccion-mapa__mapa-status--success {
    background-color: #d4edda;
    color: #155724;
}
.seccion-mapa--editor .seccion-mapa__mapa-status--error {
    background-color: #f8d7da;
    color: #721c24;
}
.seccion-mapa--editor .seccion-mapa__mapa-status--empty {
    background-color: #e9ecef;
    border: 2px dashed #adb5bd;
    color: #6c757d;
    justify-content: center;
    min-height: 60px;
}
.seccion-mapa--editor .seccion-mapa__mapa-status .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}