/* 1. Fondo base y reseteo de contenedores globales de Joomla */
html.is-extension-page,
body.is-extension-page {
    background-color: #00356F !important;
    color: #212529 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* Solo los contenedores directos de la plantilla Joomla se abren al 100% */
body.is-extension-page #t4-main-body,
body.is-extension-page .t4-main-body,
body.is-extension-page .t4-section.t4-main-body,
body.is-extension-page .t4-wrapper,
body.is-extension-page .t4-content,
body.is-extension-page .t4-main {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
}

body.is-extension-page #t4-main-body>.t4-section-inner,
body.is-extension-page #t4-main-body>.container,
body.is-extension-page #t4-main-body>.container-fluid,
body.is-extension-page #t4-main-body>.container-full,
body.is-extension-page #t4-main-body>.t4-section-inner>.container,
body.is-extension-page #t4-main-body>.t4-section-inner>.container-fluid,
body.is-extension-page #t4-main-body>.t4-section-inner>.container-full {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar mensajes vacíos de sistema que puedan añadir espacio */
body.is-extension-page #system-message-container:empty {
    display: none !important;
}

.site-default p {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

/* 2. Wrapper principal de la extensión */
#bt-extension-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #212529;
    font-family: 'segoe-ui', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* 3. Bandas a todo el ancho (full-bleed) */
#bt-extension-wrapper .band {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
}

#bt-extension-wrapper .band--hero {
    background: #00356F !important;
    padding-top: 126px !important;
    overflow: hidden;
}

#bt-extension-wrapper .band--white {
    background: #ffffff !important;
}

#bt-extension-wrapper .band--gray {
    background: #F4F6FB !important;
}

#bt-extension-wrapper .band--deep {
    background: #00489A !important;
}

#bt-extension-wrapper .band--foot {
    background: #00356F !important;
}

/* 4. Contenedor interno de las secciones (.container) */
#bt-extension-wrapper .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px 0 96px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 1420px) {
    #bt-extension-wrapper .container {
        padding: 0 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 980px) {
    #bt-extension-wrapper .container {
        padding: 0 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #bt-extension-wrapper .band {
        padding: 80px 0 !important;
    }

    #bt-extension-wrapper .band--hero {
        padding-top: 80px !important;
    }
}

@media (max-width: 600px) {
    #bt-extension-wrapper .band {
        padding: 64px 0 !important;
    }

    #bt-extension-wrapper .band--hero {
        padding-top: 64px !important;
    }
}

/* 5. Reseteo de clases y elementos de Bootstrap / Joomla */
/* Eliminar fondo amarillo que Bootstrap 5 impone a .mark */
#bt-extension-wrapper .mark,
#bt-extension-wrapper mark {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* Párrafos: anular márgenes inferiores y sangrías de Joomla */
#bt-extension-wrapper p {
    padding: 0;
    text-indent: 0 !important;
    max-width: none;
}

#bt-extension-wrapper .hero__sub {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: #99C9FF !important;
    max-width: 48ch !important;
    margin: 0 0 32px !important;
    text-align: left !important;
}

#bt-extension-wrapper .sec-sub {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #495057 !important;
    max-width: 60ch !important;
    margin: 0 !important;
    text-align: left !important;
}

#bt-extension-wrapper .band--deep .sec-sub,
#bt-extension-wrapper .band--hero .sec-sub,
#bt-extension-wrapper .band--foot .sec-sub {
    color: #99C9FF !important;
}

/* Titulares */
#bt-extension-wrapper h1,
#bt-extension-wrapper h2,
#bt-extension-wrapper h3,
#bt-extension-wrapper h4 {
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
}

#bt-extension-wrapper .hero h1 {
    font-size: clamp(40px, 5.6vw, 64px) !important;
    color: #fff !important;
    margin: 0 0 20px 0 !important;
}

#bt-extension-wrapper h2.sec {
    font-size: clamp(34px, 4.4vw, 48px) !important;
    margin: 0 0 18px 0 !important;
}

/* Enlaces y botones: evitar subrayados por defecto de Bootstrap */
#bt-extension-wrapper a {
    text-decoration: none !important;
    color: #fff !important;
}

#bt-extension-wrapper a:hover {
    text-decoration: none !important;
}

#bt-extension-wrapper .btn {
    text-decoration: none !important;
}

#bt-extension-wrapper .btn-ghost {
    color: #fff !important;
}

/* Enlaces del footer */
#bt-extension-wrapper .foot nav a {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .32) !important;
}

#bt-extension-wrapper .foot nav a:hover {
    color: #fff !important;
    border-color: #fff !important;
}

/* Lista de beneficios del hero */
#bt-extension-wrapper ul.hero__benefits {
    list-style: none !important;
    margin: 0 0 36px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 28px !important;
}

/* 6. Canvas animado del globo terráqueo */
#bt-extension-wrapper .net {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28), #000 58%) !important;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28), #000 58%) !important;
}

#bt-extension-wrapper .band>.container,
#bt-extension-wrapper .band--hero>.container {
    position: relative !important;
    z-index: 2 !important;
}

/* 7. Navegación flotante (Dock) */
#bt-extension-wrapper .dock {
    position: fixed !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 55 !important;
    background: #ffffff !important;
}

#bt-extension-wrapper .dock a {
    color: #495057 !important;
    text-decoration: none !important;
}

#bt-extension-wrapper .dock a svg {
    stroke: currentColor !important;
}

#bt-extension-wrapper .dock a:hover {
    background: #F4F6FB !important;
    color: #212529 !important;
}

#bt-extension-wrapper .dock a[aria-current="true"] {
    background: #E5F1FF !important;
    color: #0069DB !important;
}

#bt-extension-wrapper .dock a.dock__cta {
    background: #007DFF !important;
    color: #ffffff !important;
}

#bt-extension-wrapper .dock a.dock__cta:hover {
    background: #007DFF !important;
    filter: brightness(1.08) !important;
    color: #ffffff !important;
}

@media (max-width: 980px) {
    #bt-extension-wrapper .dock {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        transform: none !important;
        z-index: 55 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 1px 0 #E2E8F0 !important;
    }

    #bt-extension-wrapper .dock a {
        color: #495057 !important;
    }

    #bt-extension-wrapper .dock a span {
        opacity: 1 !important;
    }
}

/* 8. Asistente flotante KatIA */
#bt-extension-wrapper .fab {
    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;
    z-index: 60 !important;
}

#bt-extension-wrapper .fab-bubble {
    position: fixed !important;
    left: 88px !important;
    bottom: 26px !important;
    z-index: 59 !important;
}

#bt-extension-wrapper .helper {
    position: fixed !important;
    left: 20px !important;
    bottom: 88px !important;
    z-index: 60 !important;
}

@media (min-width: 761px) {
    #bt-extension-wrapper .fab-bubble {
        left: 144px !important;
        bottom: 48px !important;
    }

    #bt-extension-wrapper .helper {
        bottom: 144px !important;
    }
}

/* 9. Desplazamiento horizontal responsivo para la sección de instalación (#instalar) */
@media (max-width: 980px) {
    /* Área 1: Maqueta / Vista previa interactiva de la ventana */
    #bt-extension-wrapper .install__stage {
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    #bt-extension-wrapper .stage-card {
        padding: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scrollbar-width: thin !important;
        scrollbar-color: #007DFF rgba(0, 0, 0, 0.08) !important;
    }

    #bt-extension-wrapper .stage-card::-webkit-scrollbar {
        height: 6px !important;
        display: block !important;
    }

    #bt-extension-wrapper .stage-card::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
    }

    #bt-extension-wrapper .stage-card::-webkit-scrollbar-thumb {
        background: #007DFF !important;
        border-radius: 6px !important;
    }

    #bt-extension-wrapper .mock {
        min-width: 540px !important;
        overflow: visible !important;
    }

    #bt-extension-wrapper .mock__btn.ghost {
        color: var(--muted) !important;
    }

    /* Área 2: Pestañas de pasos y navegación de instalación */
    #bt-extension-wrapper .install__steps {
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    #bt-extension-wrapper .step-tabs {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #bt-extension-wrapper .step-tabs__list {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scroll-behavior: smooth !important;
        scrollbar-width: thin !important;
        scrollbar-color: #007DFF rgba(0, 0, 0, 0.08) !important;
        padding-bottom: 6px !important;
    }

    #bt-extension-wrapper .step-tabs__list::-webkit-scrollbar {
        display: block !important;
        height: 5px !important;
    }

    #bt-extension-wrapper .step-tabs__list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
    }

    #bt-extension-wrapper .step-tabs__list::-webkit-scrollbar-thumb {
        background: #007DFF !important;
        border-radius: 6px !important;
    }

    #bt-extension-wrapper .step-tab {
        flex: none !important;
        white-space: nowrap !important;
    }
}