/**
 * Estilos base para el bloque Universal Container
 */

.wp-block-gutenberg-test-universal-container {
    display: block;
    box-sizing: border-box;
    position: relative;
}

/* Contenedor estándar por defecto */
.wp-block-gutenberg-test-universal-container.aligncenter {
    margin: 0 auto;
}

/* Alineaciones de ancho completo */
.wp-block-gutenberg-test-universal-container.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
}

/* CSS BREAKOUT SIMPLE - Copiado de bloques que SÍ funcionan */
.wp-block-gutenberg-test-universal-container.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
}

/* Asegurar que el contenido interno se posicione correctamente */
.wp-block-gutenberg-test-universal-container > .wp-block-group__inner-container,
.wp-block-gutenberg-test-universal-container > .block-editor-inner-blocks {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Estilo para elementos de fondo */
.wp-block-gutenberg-test-universal-container .universal-container-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    pointer-events: none;
}

.wp-block-gutenberg-test-universal-container .universal-container-video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

/* Overflow hidden para mantener border radius con contenido interno */
.wp-block-gutenberg-test-universal-container[style*="border-radius"] {
    overflow: hidden;
}

/* Responsive: reducir márgenes y padding en móviles */
@media (max-width: 768px) {
    .wp-block-gutenberg-test-universal-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wp-block-gutenberg-test-universal-container.alignfull {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

@media (max-width: 480px) {
    .wp-block-gutenberg-test-universal-container {
        /* Reducir padding automáticamente en móviles muy pequeños */
        /* Los estilos específicos se manejan en render.php */
    }
}

/* Editor específico - mejorar visualización en el editor de bloques */
.editor-styles-wrapper .wp-block-gutenberg-test-universal-container {
    /* Asegurar que el bloque sea visible en el editor */
    min-height: 50px;
}

/* CSS específico para el editor de Gutenberg - técnica breakout real */
.block-editor-block-list__layout .wp-block-gutenberg-test-universal-container.alignfull,
.editor-styles-wrapper .wp-block-gutenberg-test-universal-container.alignfull {
    /* Usar la misma técnica breakout que en frontend */
    width: 100vw !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    /* Indicador visual para el editor */
    border-left: 4px solid #007cba;
    border-right: 4px solid #007cba;
    box-sizing: border-box !important;
}

.editor-styles-wrapper .wp-block-gutenberg-test-universal-container.alignfull::before {
    content: "ANCHO COMPLETO DE PÁGINA";
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    background: #007cba;
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 2px 5px;
    z-index: 10;
    pointer-events: none;
}

.editor-styles-wrapper .wp-block-gutenberg-test-universal-container.alignwide {
    /* Simular ancho amplio en el editor */
    width: calc(100% + 30px) !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
}

.editor-styles-wrapper .wp-block-gutenberg-test-universal-container:empty::before {
    content: "Contenedor Universal - Añade bloques aquí";
    display: block;
    padding: 1rem;
    text-align: center;
    color: #666;
    font-style: italic;
    border: 2px dashed #ccc;
    border-radius: 4px;
}

/* Placeholder cuando no hay contenido */
.wp-block-gutenberg-test-universal-container .block-editor-block-list__empty-block-inserter {
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Asegurar que los controles del editor funcionan correctamente */
.wp-block-gutenberg-test-universal-container .block-editor-inner-blocks {
    width: 100%;
}

.wp-block-gutenberg-test-universal-container .block-editor-block-list__layout {
    margin: 0;
}

/* Prevenir problemas con z-index en el editor */
.editor-styles-wrapper .wp-block-gutenberg-test-universal-container .universal-container-video-background {
    z-index: -1 !important;
}

/* Estilos para mejorar la experiencia en el editor cuando hay fondo de video */
.editor-styles-wrapper .wp-block-gutenberg-test-universal-container[data-background-type="video"] {
    /* Agregar un overlay sutil para mejorar la legibilidad en el editor */
    background: rgba(0, 0, 0, 0.1);
}

/* Transiciones suaves para cambios de estilo */
.wp-block-gutenberg-test-universal-container {
    transition: all 0.3s ease;
}

.wp-block-gutenberg-test-universal-container * {
    transition: inherit;
}

/* Mejoras de accesibilidad */
.wp-block-gutenberg-test-universal-container:focus-within {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Soporte para modo de alto contraste */
@media (prefers-contrast: high) {
    .wp-block-gutenberg-test-universal-container {
        border: 1px solid;
    }
}