/**
 * CSS de Compatibilidad con Elementor
 * Contabilidad Premium Pro Theme
 */

/* ================================================
   CONFIGURACIONES BÁSICAS PARA ELEMENTOR
   ================================================ */

/* Contenedor principal para páginas de Elementor */
.elementor-page .site-main {
    padding: 0;
    margin: 0;
}

/* Remover padding del contenido en páginas de Elementor */
.elementor-page #content {
    padding: 0;
}

/* Asegurar que las secciones de Elementor usen el ancho completo */
.elementor-section-wrap {
    overflow: visible !important;
}

/* ================================================
   PLANTILLA CANVAS - SIN HEADER/FOOTER
   ================================================ */

/* Ocultar header y footer en plantilla canvas */
.elementor-template-elementor_canvas .site-header,
.elementor-template-elementor_canvas .site-footer {
    display: none !important;
}

/* Remover padding y margin del contenedor principal en canvas */
.elementor-template-elementor_canvas #page {
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-template-elementor_canvas .site-main {
    padding: 0 !important;
    margin: 0 !important;
}

/* ================================================
   CONFIGURACIONES DE ANCHO COMPLETO
   ================================================ */

/* Secciones con ancho completo */
.elementor-section.elementor-section-full_width > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Secciones con contenedor boxed */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Columnas de ancho completo */
.elementor-column.elementor-col-100 {
    width: 100%;
}

/* ================================================
   ELEMENTOS Y WIDGETS
   ================================================ */

/* Contenedores de widgets */
.elementor-widget-container {
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Espaciado entre widgets */
.elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

/* Títulos de Elementor */
.elementor-heading-title {
    margin: 0;
    padding: 0;
}

/* Botones de Elementor */
.elementor-button {
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 600;
}

.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ================================================
   EFECTOS DE FONDO
   ================================================ */

/* Overlays de fondo */
.elementor-background-overlay {
    z-index: 0;
    transition: all 0.3s ease;
}

/* Efectos parallax */
.elementor-section[data-settings*="background_motion_fx_motion_fx_scrolling"] {
    will-change: transform;
}

/* ================================================
   ANIMACIONES Y TRANSICIONES
   ================================================ */

/* Resetear animaciones del tema que pueden interferir */
.elementor-element {
    animation: none !important;
}

/* Permitir animaciones de Elementor */
.elementor-invisible {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Animaciones de entrada personalizadas */
.elementor-animation-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.elementor-animation-fade-in.elementor-visible {
    opacity: 1;
}

.elementor-animation-slide-up {
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.6s ease;
}

.elementor-animation-slide-up.elementor-visible {
    transform: translateY(0);
    opacity: 1;
}

/* ================================================
   NAVEGACIÓN Y MENÚS
   ================================================ */

/* Menús de navegación de Elementor */
.elementor-nav-menu .elementor-nav-menu__layout-horizontal .elementor-nav-menu > li {
    margin: 0 15px;
}

.elementor-nav-menu--main .elementor-nav-menu__container .elementor-item {
    padding: 10px 15px;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.elementor-nav-menu--main .elementor-nav-menu__container .elementor-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* ================================================
   FORMULARIOS
   ================================================ */

/* Campos de formulario de Elementor */
.elementor-field-group .elementor-field {
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    background: white;
}

.elementor-field-group .elementor-field:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* Botones de envío */
.elementor-field-group .elementor-button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.elementor-field-group .elementor-button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/* ================================================
   RESPONSIVE - DISPOSITIVOS MÓVILES
   ================================================ */

@media (max-width: 768px) {
    /* Secciones en móvil */
    .elementor-section {
        padding: 30px 15px !important;
    }
    
    /* Columnas en móvil */
    .elementor-column {
        padding: 10px !important;
    }
    
    /* Títulos en móvil */
    .elementor-heading-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    /* Botones en móvil */
    .elementor-button {
        width: 100%;
        text-align: center;
        padding: 15px !important;
    }
    
    /* Navegación móvil */
    .elementor-nav-menu .elementor-nav-menu__layout-horizontal {
        flex-direction: column;
    }
    
    .elementor-nav-menu .elementor-nav-menu__layout-horizontal .elementor-nav-menu > li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* Ajustes adicionales para móviles pequeños */
    .elementor-section {
        padding: 20px 10px !important;
    }
    
    .elementor-heading-title {
        font-size: 1.5rem !important;
    }
    
    .elementor-button {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ================================================
   WIDGETS ESPECÍFICOS
   ================================================ */

/* Widget de imagen */
.elementor-widget-image img {
    transition: all 0.3s ease;
}

.elementor-widget-image:hover img {
    transform: scale(1.05);
}

/* Widget de iconos */
.elementor-widget-icon .elementor-icon {
    transition: all 0.3s ease;
}

.elementor-widget-icon:hover .elementor-icon {
    transform: translateY(-5px);
}

/* Widget de contador */
.elementor-widget-counter .elementor-counter-number {
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Widget de testimonios */
.elementor-widget-testimonial .elementor-testimonial-content {
    position: relative;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* ================================================
   CORRECCIONES Y MEJORAS
   ================================================ */

/* Asegurar que el contenido no se desborde */
.elementor-widget-container {
    overflow: hidden;
}

/* Mejorar la carga de imágenes */
.elementor-widget-image img {
    width: 100%;
    height: auto;
}

/* Corregir z-index de elementos flotantes */
.elementor-element.elementor-element-edit-mode {
    z-index: 9999;
}

/* Asegurar que los enlaces funcionen correctamente */
.elementor-widget a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ================================================
   MODO PREVIEW DE ELEMENTOR
   ================================================ */

/* Estilos específicos para el editor de Elementor */
.elementor-editor-active .elementor-element:hover {
    outline: 2px solid #71d7f7;
}

.elementor-editor-active .elementor-empty-view {
    border: 2px dashed #c7c7c7;
    padding: 20px;
    text-align: center;
    color: #999;
}

/* ================================================
   COMPATIBILIDAD CON TEMA EXISTENTE
   ================================================ */

/* Asegurar que los estilos del tema no interfieran */
.elementor-page .site-main {
    background: transparent;
}

/* Heredar tipografías globales */
.elementor-widget-container {
    font-family: 'Inter', sans-serif;
}

/* Mantener consistencia de colores */
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
    color: inherit;
}