/* =========================================================
   LC RESPONSIVE PERFECT PATCH
   Solo adaptabilidad: no cambia identidad visual, colores,
   textos, lógica, datos ni estructura PHP.
========================================================= */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overflow-x:clip;
}

body{
    max-width:100%;
    overflow-x:hidden;
}

*, *::before, *::after{
    min-width:0;
}

img, svg, video, canvas, iframe{
    max-width:100%;
}

img, video, canvas{
    height:auto;
}

button, input, select, textarea, a{
    max-width:100%;
}

input, select, textarea{
    min-width:0;
}

.table-responsive,
.premium-table-wrap,
.table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* Evita que textos largos, rutas, emails o URLs rompan el ancho */
.campus-module,
.campus-popup,
.campus-dashboard,
.popup-card,
.module-panel,
.card,
.panel,
.course-card,
.feature-card,
.smart-card,
.card-sector,
.contact-table,
.premium-table td,
.table td{
    overflow-wrap:anywhere;
    word-break:normal;
}

/* =========================================================
   MODULOS INTERNOS CAMPUS
========================================================= */
.campus-module .module-shell,
.campus-module .module-hero,
.campus-module .module-panel,
.campus-module .course-grid,
.campus-module .metric-grid{
    max-width:100% !important;
}

.campus-module .course-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
}

.campus-module .course-card,
.campus-module .metric-card,
.campus-module .module-panel,
.campus-module .premium-table-wrap{
    min-width:0 !important;
}

.campus-module .module-hero{
    flex-wrap:wrap;
}

.campus-module .module-actions,
.campus-module .course-actions,
.campus-module .action-row,
.popup-actions{
    min-width:0;
}

.campus-module .module-button,
.campus-module a.module-button,
.campus-module button.module-button,
.campus-module .mini-btn,
.campus-module a.mini-btn,
.campus-module button.mini-btn{
    text-align:center;
}

@media (max-width:1180px){
    .campus-module .metric-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width:760px){
    body.campus-module{
        padding:12px !important;
    }

    .campus-module .module-hero{
        padding:18px !important;
        border-radius:22px !important;
        align-items:stretch !important;
    }

    .campus-module .module-title{
        font-size:clamp(25px, 8vw, 34px) !important;
        letter-spacing:-.045em !important;
    }

    .campus-module .module-subtitle{
        font-size:14px !important;
    }

    .campus-module .metric-grid,
    .campus-module .course-grid{
        grid-template-columns:1fr !important;
    }

    .campus-module .metric-card,
    .campus-module .module-panel,
    .campus-module .course-card{
        border-radius:20px !important;
    }

    .campus-module .module-actions,
    .campus-module .course-actions,
    .campus-module .action-row{
        width:100% !important;
        justify-content:stretch !important;
        align-items:stretch !important;
    }

    .campus-module .module-button,
    .campus-module a.module-button,
    .campus-module button.module-button,
    .campus-module .mini-btn,
    .campus-module a.mini-btn,
    .campus-module button.mini-btn{
        flex:1 1 100% !important;
        width:100% !important;
        white-space:normal !important;
    }

    .campus-module .premium-table{
        min-width:720px !important;
    }

    .campus-module .module-search,
    .popup-input,
    .popup-select,
    .popup-textarea,
    input,
    select,
    textarea{
        font-size:16px !important;
    }
}

@media (max-width:420px){
    body.campus-module{
        padding:8px !important;
    }

    .campus-module .module-hero,
    .campus-module .module-panel,
    .popup-card{
        border-radius:18px !important;
    }

    .campus-module .module-hero,
    .campus-module .module-panel,
    .campus-module .course-body{
        padding:16px !important;
    }

    .campus-module .course-actions{
        padding:0 16px 16px !important;
    }

    .campus-module .module-kicker,
    .popup-kicker{
        max-width:100%;
        white-space:normal;
        line-height:1.25;
    }
}

@media (max-width:340px){
    body.campus-module{
        padding:6px !important;
    }

    .campus-module .module-title{
        font-size:24px !important;
    }

    .campus-module .metric-value{
        font-size:28px !important;
    }
}

/* =========================================================
   POPUPS / FORMULARIOS
========================================================= */
.popup-shell,
.popup-card{
    max-width:100% !important;
}

.popup-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.popup-actions{
    z-index:5;
}

@media (max-width:760px){
    html.popup-html,
    body.campus-popup{
        min-height:100dvh !important;
    }

    body.campus-popup{
        padding:10px !important;
    }

    .popup-hero,
    .popup-body{
        padding:18px !important;
    }

    .popup-title{
        font-size:clamp(24px, 8vw, 34px) !important;
    }

    .popup-grid{
        grid-template-columns:1fr !important;
        gap:0 !important;
    }

    .popup-actions{
        margin:6px -18px -18px !important;
        padding:14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
        justify-content:stretch !important;
    }

    .popup-btn{
        width:100% !important;
        min-height:50px !important;
    }
}

@media (max-height:680px){
    body.campus-popup{
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

    .popup-hero{
        padding-top:18px !important;
        padding-bottom:16px !important;
    }

    .popup-body{
        padding-top:18px !important;
    }
}

/* =========================================================
   DASHBOARD PRINCIPAL
========================================================= */
.campus-dashboard .container-fluid,
.campus-dashboard .row,
.campus-dashboard main,
.campus-dashboard .content-wrap,
.campus-dashboard .panel{
    max-width:100%;
}

.campus-dashboard .row > *,
.campus-dashboard .content-wrap,
.campus-dashboard .panel,
.campus-dashboard iframe{
    min-width:0;
}

.campus-dashboard iframe{
    display:block;
    width:100% !important;
    max-width:100% !important;
}

.campus-dashboard .topbar-inner > .d-flex{
    min-width:0;
}

.campus-dashboard .topbar-actions{
    min-width:0 !important;
}

.campus-dashboard .offcanvas{
    width:min(88vw, 340px) !important;
}

@media (max-width:991px){
    .campus-dashboard .content-wrap{
        padding:16px !important;
    }

    .campus-dashboard iframe{
        height:calc(100dvh - 215px) !important;
        min-height:520px;
    }
}

@media (max-width:720px){
    .campus-dashboard .topbar{
        padding-top:10px !important;
        padding-bottom:10px !important;
    }

    .campus-dashboard .topbar-inner{
        gap:12px !important;
    }

    .campus-dashboard .topbar-inner > .d-flex{
        width:100%;
        flex-wrap:wrap;
    }

    .campus-dashboard .brand-logo{
        width:44px !important;
        height:44px !important;
        border-radius:14px !important;
    }

    .campus-dashboard .topbar-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px !important;
    }

    .campus-dashboard .topbar-actions .btn{
        width:100% !important;
        min-width:0 !important;
        padding-left:10px !important;
        padding-right:10px !important;
        white-space:normal !important;
    }

    .campus-dashboard #inicio > .d-flex.mb-3{
        padding:18px !important;
        border-radius:20px !important;
    }

    .campus-dashboard .h4{
        font-size:clamp(24px, 7vw, 30px) !important;
    }

    .campus-dashboard iframe{
        height:calc(100dvh - 255px) !important;
        min-height:500px;
        border-radius:18px !important;
    }
}

@media (max-width:430px){
    .campus-dashboard .content-wrap{
        padding:10px !important;
    }

    .campus-dashboard .topbar-actions{
        grid-template-columns:1fr;
    }

    .campus-dashboard .topbar-actions .btn{
        min-height:44px !important;
    }

    .campus-dashboard iframe{
        height:calc(100dvh - 295px) !important;
        min-height:480px;
    }
}

@media (max-height:680px) and (max-width:991px){
    .campus-dashboard iframe{
        min-height:420px;
    }
}

/* =========================================================
   LOGIN
========================================================= */
.login-shell{
    max-width:100%;
}

.login-shell .hero-panel,
.login-shell .access-panel,
.login-shell .access-card,
.login-shell .brand-lockup{
    min-width:0;
}

@media (max-width:980px){
    .login-shell{
        width:100% !important;
    }
}

@media (max-width:620px){
    .login-shell .brand-row{
        flex-wrap:wrap;
    }

    .login-shell .hero-panel{
        min-height:auto !important;
    }

    .login-shell .hero-content{
        margin:34px 0 24px !important;
    }

    .login-shell .hero-title{
        font-size:clamp(32px, 10vw, 46px) !important;
    }
}

@media (max-width:380px){
    body:has(.login-shell){
        padding:8px !important;
    }

    .login-shell{
        border-radius:22px !important;
    }

    .login-shell .hero-panel,
    .login-shell .access-panel{
        padding:20px 16px !important;
    }

    .login-shell .brand-logo{
        width:58px !important;
        height:58px !important;
    }
}

@media (max-height:720px) and (min-width:981px){
    .login-shell{
        min-height:auto !important;
    }

    .login-shell .hero-content{
        margin:32px 0 !important;
    }
}

/* =========================================================
   PORTAFOLIO / LANDINGS DINAMICAS
========================================================= */
.hero-panel,
.tools-panel,
.panel,
.contacto-panel,
.feature-panel,
.smart-panel,
.cta-panel,
.modal-box,
.modal-contenido{
    max-width:100%;
}

.cards-grid,
.tools-grid,
.feature-grid,
.smart-grid,
.cta-grid,
.form-grid,
.footer-grid,
.grid-courses{
    min-width:0;
}

.card-producto,
.tool-card,
.feature-card,
.smart-card,
.card-sector,
.course-card{
    min-width:0;
}

@media (max-width:1300px){
    .tools-grid,
    .smart-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .cards-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width:900px){
    .contenedor,
    .container,
    .container-fluid{
        max-width:100% !important;
    }

    .header-inner,
    .brand,
    .brand-link,
    .nav,
    .hero-botones,
    .contacto-acciones,
    .modal-actions,
    .card-footer,
    .cta-grid{
        min-width:0;
    }

    .header-inner,
    .hero-botones,
    .contacto-acciones{
        flex-wrap:wrap !important;
    }

    .tools-grid,
    .cards-grid,
    .feature-grid,
    .smart-grid,
    .cta-grid,
    .form-grid,
    .footer-grid,
    .grid-courses{
        grid-template-columns:1fr !important;
    }

    .modal,
    .modal-box,
    .modal-contenido{
        width:calc(100vw - 20px) !important;
        max-width:calc(100vw - 20px) !important;
    }

    .modal-frame-wrap,
    .modal-body,
    .modal-iframe{
        height:calc(100dvh - 140px) !important;
        min-height:420px;
    }
}

@media (max-width:640px){
    .contenedor{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .hero-main,
    .panel-header,
    .cards-wrap,
    .tools-header,
    .tools-body,
    .feature-header,
    .feature-grid,
    .smart-grid,
    .cta-main,
    .cta-side,
    .contacto-header,
    .contacto-body{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .brand-texto,
    .logo{
        overflow-wrap:anywhere;
    }

    .btn-principal,
    .btn-secundario,
    .btn-demo,
    .btn-contacto,
    .btn-module,
    .tool-link,
    .btn-preview,
    .modal-link,
    .modal-close{
        width:100% !important;
        text-align:center;
        white-space:normal !important;
    }

    .modal-header{
        align-items:stretch !important;
    }

    .contacto-fijo,
    .whatsapp-btn{
        right:calc(12px + env(safe-area-inset-right)) !important;
        bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width:380px){
    .contenedor{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .hero-panel,
    .panel,
    .tools-panel,
    .contacto-panel,
    .feature-panel,
    .smart-panel,
    .cta-panel,
    .card-producto,
    .tool-card,
    .feature-card,
    .smart-card,
    .card-sector,
    .course-card{
        border-radius:18px !important;
    }

    .pill{
        max-width:100%;
        white-space:normal !important;
        line-height:1.25;
    }
}

/* =========================================================
   WEBS / PREVIEWS DEL PORTAFOLIO
========================================================= */
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) nav,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) header,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) section,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) footer{
    max-width:100%;
}

body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-content,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-image,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-visual,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .content,
body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .image-wrapper{
    min-width:0;
}

@media (max-width:1024px){
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-section,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) header.hero{
        height:auto !important;
        min-height:auto !important;
    }
}

@media (max-width:820px){
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) nav{
        height:auto !important;
        min-height:70px;
        flex-wrap:wrap !important;
        gap:12px !important;
        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .nav-links{
        flex-wrap:wrap !important;
        gap:14px !important;
    }

    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .btn-group,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-buttons,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .cta-buttons{
        flex-wrap:wrap !important;
    }

    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-content,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-image,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-visual{
        width:100% !important;
        max-width:100% !important;
    }
}

@media (max-width:520px){
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .btn-group > *,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .hero-buttons > *,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .cta-buttons > *,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .btn-nav,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .btn-primary,
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .btn-outline{
        width:100% !important;
        text-align:center !important;
        justify-content:center !important;
    }

    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) .float-card{
        max-width:calc(100vw - 24px);
    }
}

@media (max-width:360px){
    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) h1{
        font-size:clamp(28px, 11vw, 38px) !important;
    }

    body:not(.campus-dashboard):not(.campus-module):not(.campus-popup) h2{
        font-size:clamp(24px, 9vw, 34px) !important;
    }
}