/**
 * Sistema de Ancho Configurable para HomePro Tools v2
 * Corregido para funcionar correctamente con todas las opciones
 */

/* ==========================================================================
   BASE: Reset y configuración inicial
   ========================================================================== */
.homepro-tool-wrapper {
    position: relative;
    box-sizing: border-box;
    /* Animación suave */
    animation: homepro-fade-in 0.5s ease-out;
}

/* Override de estilos base cuando se usa el sistema de anchos */
.homepro-tool-wrapper[class*="homepro-width-"] {
    /* Reset márgenes y padding del estilo base */
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    /* Mantener márgenes verticales */
    margin-top: var(--homepro-spacing-lg, 2rem);
    margin-bottom: var(--homepro-spacing-lg, 2rem);
}

/* Contenedor interno de la herramienta */
.homepro-tool {
    box-sizing: border-box;
}

/* ==========================================================================
   MODO: FULL (Por defecto - 100% del contenedor padre)
   ========================================================================== */
.homepro-tool-wrapper.homepro-width-full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   MODO: WIDE (Expandido pero con límite máximo)
   ========================================================================== */
.homepro-tool-wrapper.homepro-width-wide {
    /* Calcular el ancho para salir del contenedor */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* Limitar el ancho máximo */
    max-width: min(1400px, 100vw);
}

.homepro-tool-wrapper.homepro-width-wide .homepro-tool {
    max-width: 1400px;
    margin: 0 auto;
}

/* ==========================================================================
   MODO: BREAKOUT (Ancho completo del viewport)
   ========================================================================== */
.homepro-tool-wrapper.homepro-width-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
}

.homepro-tool-wrapper.homepro-width-breakout .homepro-tool {
    max-width: 1600px;
    margin: 0 auto;
}

/* ==========================================================================
   MODO: CUSTOM (Breakout controlado - expande más allá del contenedor)
   ========================================================================== */
.homepro-tool-wrapper.homepro-width-custom {
    /* Similar a wide pero con ancho controlado por variable */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* El max_width define hasta dónde puede expandirse */
    max-width: min(var(--homepro-max-width, 100%), 100vw);
}

/* Contenedor interno para custom */
.homepro-tool-wrapper.homepro-width-custom .homepro-tool {
    max-width: var(--homepro-max-width, 100%);
    margin: 0 auto;
}

/* Si max_width es un porcentaje, interpretarlo como porcentaje del viewport */
.homepro-tool-wrapper.homepro-width-custom[style*="--homepro-max-width:"][style*="%"] {
    /* Los porcentajes se aplicarán al viewport, no al contenedor */
    max-width: var(--homepro-max-width);
}

/* Si el custom no debe salir del contenedor, usar clase especial */
.homepro-tool-wrapper.homepro-width-custom.homepro-no-breakout {
    width: 100%;
    position: static;
    left: auto;
    transform: none;
    max-width: var(--homepro-max-width, 100%);
}

/* ==========================================================================
   ALINEACIÓN (solo aplica a full y custom)
   ========================================================================== */
.homepro-tool-wrapper.homepro-width-full.homepro-align-left,
.homepro-tool-wrapper.homepro-width-custom.homepro-align-left {
    margin-left: 0;
    margin-right: auto;
}

.homepro-tool-wrapper.homepro-width-full.homepro-align-center,
.homepro-tool-wrapper.homepro-width-custom.homepro-align-center {
    margin-left: auto;
    margin-right: auto;
}

.homepro-tool-wrapper.homepro-width-full.homepro-align-right,
.homepro-tool-wrapper.homepro-width-custom.homepro-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* ==========================================================================
   ANCHO ESPECÍFICO PARA DESKTOP
   ========================================================================== */
@media (min-width: 1025px) {
    .homepro-tool-wrapper[style*="--homepro-desktop-width"] {
        width: var(--homepro-desktop-width);
        max-width: var(--homepro-desktop-width);
    }
}

/* ==========================================================================
   RESPONSIVE - Tablet
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Reducir padding en tablet ya no es necesario - el padding se maneja en .homepro-tool */
    
    /* Limitar wide en tablet */
    .homepro-tool-wrapper.homepro-width-wide {
        max-width: min(1200px, 100vw);
    }
}

/* ==========================================================================
   RESPONSIVE - Mobile
   ========================================================================== */
@media (max-width: 768px) {
    /* En móvil, TODOS los modos son 100% */
    .homepro-tool-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .homepro-tool {
        max-width: 100% !important;
    }
    
    /* Resetear variables custom en móvil */
    .homepro-tool-wrapper {
        --homepro-max-width: 100% !important;
        --homepro-desktop-width: 100% !important;
    }
}

/* ==========================================================================
   COMPATIBILIDAD CON THEMES POPULARES
   ========================================================================== */

/* Twenty Twenty-One, Twenty Twenty-Two, Twenty Twenty-Three */
.entry-content .homepro-tool-wrapper.homepro-width-wide,
.entry-content .homepro-tool-wrapper.homepro-width-breakout {
    max-width: none;
}

/* Astra Theme */
.ast-container .homepro-tool-wrapper.homepro-width-wide,
.ast-container .homepro-tool-wrapper.homepro-width-breakout {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

/* GeneratePress */
.inside-article .homepro-tool-wrapper.homepro-width-wide,
.inside-article .homepro-tool-wrapper.homepro-width-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Elementor - forzar el breakout */
.elementor-widget-container .homepro-tool-wrapper.homepro-width-breakout {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Divi */
.et_pb_section .homepro-tool-wrapper.homepro-width-wide,
.et_pb_section .homepro-tool-wrapper.homepro-width-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================================================
   UTILIDADES ADICIONALES
   ========================================================================== */

/* Forzar ancho completo (útil para debugging) */
.homepro-tool-wrapper.homepro-force-fullwidth {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: none !important;
}

/* Modo Sticky */
.homepro-tool-wrapper.homepro-sticky {
    position: sticky;
    top: 20px;
    z-index: 100;
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes homepro-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Para mantener la animación con transform en wide/breakout */
.homepro-tool-wrapper.homepro-width-wide,
.homepro-tool-wrapper.homepro-width-breakout {
    animation: homepro-fade-in-special 0.5s ease-out;
}

@keyframes homepro-fade-in-special {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   DEBUG MODE (para desarrollo)
   ========================================================================== */
.homepro-debug .homepro-tool-wrapper {
    border: 2px dashed #ff0000;
    background: rgba(255, 0, 0, 0.05);
}

.homepro-debug .homepro-tool-wrapper::before {
    content: attr(class);
    position: absolute;
    top: -25px;
    left: 10px;
    background: #ff0000;
    color: white;
    padding: 2px 8px;
    font-size: 11px;
    z-index: 9999;
    font-family: monospace;
}

.homepro-debug .homepro-tool {
    border: 2px dashed #0000ff;
    background: rgba(0, 0, 255, 0.05);
}

/* ==========================================================================
   FIXES ESPECÍFICOS
   ========================================================================== */

/* Prevenir overflow horizontal */
body {
    overflow-x: hidden;
}

/* Asegurar que el contenedor principal no cause problemas */
.homepro-tool-wrapper * {
    box-sizing: border-box;
}

/* Fix para cuando está dentro de un contenedor con overflow hidden */
.entry-content {
    overflow: visible;
}

/* Asegurar z-index apropiado */
.homepro-tool-wrapper {
    z-index: 1;
}