/* =========================================================
   Responsive Perfect Pack - Cotizaciones
   Objetivo: adaptar todas las pantallas a celulares, tablets,
   notebooks, pantallas grandes y iframes sin cambiar logica.
   ========================================================= */

:root{
    --rp-pad:clamp(12px,4vw,32px);
    --rp-radius:clamp(16px,4vw,26px);
    --rp-safe-vh:calc(var(--rvh, 1vh) * 100);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
img,svg,video,canvas{max-width:100%;height:auto;}
iframe{max-width:100%;}
button,input,select,textarea{max-width:100%;font-size:16px;}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}

/* Evita que textos, emails, codigos o montos largos rompan el ancho */
h1,h2,h3,h4,h5,h6,p,a,span,strong,small,td,th,label,button,input,textarea,select,code,pre{
    overflow-wrap:anywhere;
}
pre{white-space:pre-wrap;max-width:100%;overflow:auto;}

/* Contenedores generales */
.container,.contenedor,.content,.page,.wrap,main,section,.panel,.card,.box,.table-wrap,.tabla-container,.responsive-table-shell{
    max-width:100%;
}
.responsive-table-shell,.table-wrap,.tabla-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Formularios y acciones: fluidos sin romper botones */
.form-row,.form-grid,.input-row,.row,.grid,.filters,.filter-row,.acciones,.actions,.botones,.button-row,.form-actions,.modal-actions,.topbar-actions,.header-actions{
    min-width:0;
}
.actions,.acciones,.botones,.button-row,.form-actions,.modal-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.actions > *, .acciones > *, .botones > *, .button-row > *, .form-actions > *, .modal-actions > *{min-width:0;}
button,.btn,.btn-primary,.btn-principal,.btn-secundario,.btn-soft,.btn-demo,.modal-link,.modal-close,input[type="submit"],input[type="button"]{
    max-width:100%;
    white-space:normal!important;
    line-height:1.2;
    text-align:center;
}
input,select,textarea{min-width:0;}
textarea{resize:vertical;}

/* Dashboard: menu responsive tipo sandwich */
.mobile-menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:10px 13px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.16)!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    font-weight:900;
    cursor:pointer;
}
.mobile-menu-toggle i,.mobile-menu-toggle span:first-child{font-size:18px;line-height:1;}

@media (max-width:980px){
    body.app-dashboard{overflow-x:hidden!important;overflow-y:auto!important;}
    body.app-dashboard .app-shell{display:block!important;min-height:100dvh;height:auto!important;width:100%!important;}
    body.app-dashboard .app-sidebar{
        position:sticky!important;
        top:0!important;
        z-index:1000!important;
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:10px!important;
        width:100%!important;
        padding:10px var(--rp-pad)!important;
        overflow:visible!important;
    }
    body.app-dashboard .app-brand{min-width:0!important;flex:1 1 auto!important;border:0!important;margin:0!important;padding:0!important;justify-content:flex-start!important;}
    body.app-dashboard .app-brand > div:last-child{display:block!important;min-width:0!important;}
    body.app-dashboard .app-brand strong,
    body.app-dashboard .app-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw;}
    body.app-dashboard .mobile-menu-toggle{display:inline-flex!important;flex:0 0 auto;}
    body.app-dashboard .app-menu{
        display:none!important;
        flex:1 0 100%!important;
        width:100%!important;
        margin:8px 0 0!important;
        padding:10px!important;
        border-radius:20px!important;
        background:rgba(255,255,255,.07)!important;
        border:1px solid rgba(255,255,255,.10)!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        overflow:visible!important;
    }
    body.app-dashboard .app-sidebar.menu-open .app-menu{display:grid!important;}
    body.app-dashboard .app-sidebar.menu-open .app-menu a{
        min-width:0!important;
        width:100%!important;
        justify-content:flex-start!important;
        padding:12px!important;
        transform:none!important;
    }
    body.app-dashboard .app-sidebar.menu-open .app-menu a span{display:inline!important;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    body.app-dashboard .sidebar-demo-card{display:none!important;}
    body.app-dashboard .app-main{height:auto!important;min-height:calc(100dvh - 66px)!important;display:block!important;overflow:visible!important;}
    body.app-dashboard .app-topbar{
        position:sticky!important;
        top:64px!important;
        z-index:900!important;
        padding:12px var(--rp-pad)!important;
        flex-wrap:wrap!important;
        align-items:flex-start!important;
    }
    body.app-dashboard .topbar-title{width:100%;}
    body.app-dashboard .topbar-title h1{white-space:normal!important;line-height:1.12!important;}
    body.app-dashboard .topbar-actions{width:100%;justify-content:flex-start!important;}
    body.app-dashboard .user-chip{min-width:0;max-width:100%;}
    body.app-dashboard .app-content{padding:var(--rp-pad)!important;overflow:visible!important;}
    body.app-dashboard .command-hero{grid-template-columns:1fr!important;}
    body.app-dashboard .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body.app-dashboard .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body.app-dashboard .module-frame-card{
        height:calc(100dvh - 152px)!important;
        min-height:560px!important;
        overflow:hidden!important;
    }
    body.app-dashboard .module-frame-card iframe{
        width:100%!important;
        height:100%!important;
        min-height:560px!important;
    }
}

@media (max-width:560px){
    body.app-dashboard .app-sidebar{padding:9px 12px!important;}
    body.app-dashboard .app-brand-logo{width:40px!important;height:40px!important;border-radius:14px!important;}
    body.app-dashboard .app-brand strong{font-size:14px!important;max-width:46vw;}
    body.app-dashboard .app-brand span{font-size:11px!important;max-width:46vw;}
    body.app-dashboard .mobile-menu-toggle{min-height:40px;padding:9px 10px!important;border-radius:12px!important;}
    body.app-dashboard .mobile-menu-toggle strong{display:none;}
    body.app-dashboard .app-menu{grid-template-columns:1fr!important;}
    body.app-dashboard .app-topbar{top:58px!important;}
    body.app-dashboard .topbar-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:8px!important;}
    body.app-dashboard .topbar-actions .user-chip{grid-column:1/-1;width:100%;justify-content:flex-start;border-radius:16px!important;}
    body.app-dashboard .topbar-actions a{width:100%;justify-content:center!important;padding:10px!important;}
    body.app-dashboard .hero-card,.insight-card,.kpi-card,.quick-card{border-radius:18px!important;}
    body.app-dashboard .hero-card{padding:20px!important;}
    body.app-dashboard .hero-card h2{font-size:clamp(25px,9vw,38px)!important;}
    body.app-dashboard .hero-pills{gap:7px!important;}
    body.app-dashboard .hero-pills span{font-size:11px!important;padding:7px 9px!important;}
    body.app-dashboard .dashboard-kpi-grid,
    body.app-dashboard .quick-grid{grid-template-columns:1fr!important;}
    body.app-dashboard .module-frame-card{height:calc(100dvh - 172px)!important;min-height:520px!important;border-radius:18px!important;}
    body.app-dashboard .module-frame-card iframe{min-height:520px!important;}
}

/* Tablas: en escritorio mantienen scroll; en celular se vuelven tarjetas legibles */
@media (min-width:761px){
    table{max-width:100%;}
}

@media (max-width:760px){
    table.responsive-stack{
        min-width:0!important;
        width:100%!important;
        display:block!important;
        border-collapse:separate!important;
        border-spacing:0!important;
        background:transparent!important;
    }
    table.responsive-stack thead{
        position:absolute!important;
        width:1px!important;
        height:1px!important;
        overflow:hidden!important;
        clip:rect(0 0 0 0)!important;
        white-space:nowrap!important;
    }
    table.responsive-stack tbody,
    table.responsive-stack tr,
    table.responsive-stack td{
        display:block!important;
        width:100%!important;
        min-width:0!important;
    }
    table.responsive-stack tr{
        margin:0 0 12px!important;
        padding:10px!important;
        border:1px solid rgba(148,163,184,.24)!important;
        border-radius:18px!important;
        background:rgba(255,255,255,.92)!important;
        box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
        overflow:hidden!important;
    }
    table.responsive-stack td{
        display:flex!important;
        align-items:flex-start!important;
        justify-content:space-between!important;
        gap:12px!important;
        padding:10px 4px!important;
        border:0!important;
        border-bottom:1px solid rgba(226,232,240,.9)!important;
        text-align:right!important;
        background:transparent!important;
    }
    table.responsive-stack td:last-child{border-bottom:0!important;}
    table.responsive-stack td::before{
        content:attr(data-label);
        flex:0 0 min(44%,155px);
        max-width:155px;
        text-align:left;
        color:#64748b;
        font-size:11px;
        line-height:1.25;
        font-weight:900;
        letter-spacing:.055em;
        text-transform:uppercase;
    }
    table.responsive-stack td[data-label=""],
    table.responsive-stack td:not([data-label]){justify-content:flex-start!important;text-align:left!important;}
    table.responsive-stack td[data-label=""]::before,
    table.responsive-stack td:not([data-label])::before{display:none;}
    table.responsive-stack td[data-label*="Accion"],
    table.responsive-stack td[data-label*="Acciones"],
    table.responsive-stack td[data-label*="Opciones"]{
        display:block!important;
        text-align:left!important;
    }
    table.responsive-stack td[data-label*="Accion"]::before,
    table.responsive-stack td[data-label*="Acciones"]::before,
    table.responsive-stack td[data-label*="Opciones"]::before{
        display:block;
        max-width:none;
        margin-bottom:8px;
    }
    table.responsive-stack td .actions,
    table.responsive-stack td .acciones,
    table.responsive-stack td .botones{
        width:100%;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px!important;
    }
    table.responsive-stack td .actions > *,
    table.responsive-stack td .acciones > *,
    table.responsive-stack td .botones > *{
        width:100%;
        justify-content:center;
    }
}

@media (max-width:430px){
    table.responsive-stack tr{padding:8px!important;border-radius:16px!important;}
    table.responsive-stack td{display:block!important;text-align:left!important;padding:9px 2px!important;}
    table.responsive-stack td::before{display:block;max-width:none;margin-bottom:5px;}
    table.responsive-stack td .actions,
    table.responsive-stack td .acciones,
    table.responsive-stack td .botones{grid-template-columns:1fr!important;}
}

/* Pantallas internas cargadas en iframes */
@media (max-width:820px){
    body.module-page{padding:14px!important;}
    body.module-page .container,
    body.module-page main,
    body.module-page .content,
    body.module-page .page,
    body.module-page .wrap{
        padding:14px!important;
    }
    body.module-page .header,body.module-page .topbar,body.module-page .page-header{
        width:100%!important;
        align-items:stretch!important;
        gap:12px!important;
    }
    body.module-page .header > *, body.module-page .topbar > *, body.module-page .page-header > *{min-width:0;}
    body.module-page .searchbar,body.module-page .search-box,body.module-page .filters,body.module-page .filter-row{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;width:100%!important;}
    body.module-page .kpis,body.module-page .stats,body.module-page .cards,body.module-page .cards-grid,body.module-page .grid,body.module-page .form-grid,body.module-page .feature-grid,body.module-page .smart-grid{
        grid-template-columns:1fr!important;
    }
    body.module-page .form-row,body.module-page .input-row,body.module-page .row{flex-direction:column!important;align-items:stretch!important;}
    body.module-page .actions,body.module-page .acciones,body.module-page .botones,body.module-page .button-row,body.module-page .form-actions{width:100%;}
    body.module-page .actions > *, body.module-page .acciones > *, body.module-page .botones > *, body.module-page .button-row > *, body.module-page .form-actions > *{flex:1 1 auto;}
    body.module-page .modal{padding:10px!important;align-items:flex-start!important;overflow:auto!important;}
    body.module-page .modal-content{
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        max-height:none!important;
        min-height:min(560px, calc(100dvh - 20px))!important;
        border-radius:18px!important;
    }
    body.module-page .modal-topbar,body.module-page .modal-header{gap:10px!important;align-items:flex-start!important;}
    body.module-page .modal-title,body.module-page .modal-header h3{min-width:0;line-height:1.2!important;}
    body.module-page .modal-iframe,body.module-page .modal-frame{height:calc(100dvh - 110px)!important;min-height:420px!important;}
}

@media (max-width:520px){
    body.module-page{padding:10px!important;}
    h1{font-size:clamp(24px,8vw,34px)!important;}
    h2{font-size:clamp(21px,7vw,30px)!important;}
    h3{font-size:clamp(17px,5.5vw,23px)!important;}
    p,label,small,td,th{font-size:clamp(12px,3.8vw,15px);}
    body.module-page .header,body.module-page .topbar,body.module-page .page-header,body.module-page .card,body.module-page .kpi,body.module-page .stat-card,body.module-page .panel,body.module-page .box,body.module-page form:not(.inline-form):not(.login-box){border-radius:18px!important;}
    body.module-page .kpis,body.app-dashboard .dashboard-kpi-grid{gap:10px!important;}
    body.module-page .kpi,body.module-page .stat-card,body.module-page .card{padding:14px!important;}
    body.module-page button,body.module-page .btn,body.module-page .btn-primary,body.module-page .btn-principal,body.module-page .btn-secundario,body.module-page .btn-soft,body.module-page .btn-demo,body.module-page input[type="submit"],body.module-page input[type="button"]{
        width:100%;
        min-height:44px;
        justify-content:center;
    }
    body.module-page .actions,body.module-page .acciones,body.module-page .botones,body.module-page .button-row,body.module-page .form-actions,body.module-page .modal-actions{display:grid!important;grid-template-columns:1fr!important;}
}

/* Landing portafolio principal */
@media (max-width:720px){
    .contenedor{padding-left:16px!important;padding-right:16px!important;}
    .header-inner{width:100%;}
    .brand-link,.brand{min-width:0;}
    .brand-texto{font-size:clamp(18px,7vw,24px)!important;line-height:1.05!important;}
    .nav{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;}
    .nav-link,.btn-principal,.btn-secundario,.btn-demo,.btn-preview,.modal-link,.modal-close{width:100%;justify-content:center!important;text-align:center!important;}
    .hero-main h1{font-size:clamp(32px,11vw,42px)!important;line-height:1.04!important;}
    .panel-header h2,.cta-main h2,.feature-header h2{font-size:clamp(28px,9vw,36px)!important;}
    .hero-panel,.panel,.feature-panel,.cta-panel,.card-sector,.smart-card{border-radius:20px!important;}
    .hero-main,.panel-header,.cards-wrap,.feature-header,.feature-grid,.smart-grid,.cta-main,.cta-side{padding:20px!important;}
    .hero-botones,.card-footer,.modal-actions{display:grid!important;grid-template-columns:1fr!important;width:100%;}
    .modal-preview{padding:8px!important;align-items:flex-start!important;overflow-y:auto!important;}
    body.module-page .modal-content{height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:18px!important;margin:0!important;}
    .modal-frame-wrap{height:calc(100dvh - 178px)!important;min-height:330px!important;}
}

/* Webs publicas dentro de /web */
@media (max-width:900px){
    nav,header,.navbar,.menu,.topbar{
        max-width:100%;
        gap:12px!important;
    }
    .nav-links,.menu-links,.navbar-links{
        max-width:100%;
        flex-wrap:wrap!important;
        gap:10px!important;
    }
    .nav-links a,.menu-links a,.navbar-links a{margin-left:0!important;margin-right:0!important;}
    section,.section,.hero,.about,.services,.contact,.portfolio,.features,.practicas,.socio,.cta{
        max-width:100%;
    }
    [class*="grid"],[class*="cards"],[class*="columns"],.row{
        min-width:0;
    }
}

@media (max-width:768px){
    nav,header,.navbar{
        padding-left:var(--rp-pad)!important;
        padding-right:var(--rp-pad)!important;
    }
    .hero{
        height:auto!important;
        min-height:auto!important;
        padding-left:var(--rp-pad)!important;
        padding-right:var(--rp-pad)!important;
    }
    section,.section,.about,.services,.contact,.portfolio,.features,.practicas,footer{
        padding-left:var(--rp-pad)!important;
        padding-right:var(--rp-pad)!important;
    }
    .socio,.about-content,.contact-content,.footer-content,.hero-content,.content-wrapper{
        flex-direction:column!important;
        grid-template-columns:1fr!important;
    }
    .socio-img,.socio-content,[class*="image"],[class*="img"],[class*="content"]{
        max-width:100%!important;
    }
    .socio-img,.socio-content{width:100%!important;}
    h1{font-size:clamp(2.15rem,11vw,4rem)!important;line-height:1.05!important;}
    h2{font-size:clamp(1.8rem,8vw,3rem)!important;line-height:1.12!important;}
    h3{font-size:clamp(1.25rem,6vw,2rem)!important;line-height:1.18!important;}
    [class*="grid"]{grid-template-columns:1fr!important;}
    .btn-main,.btn-contacto,.btn,.button,a[class*="btn"],button[class*="btn"]{
        max-width:100%;
        white-space:normal!important;
    }
}

@media (max-width:390px){
    :root{--rp-pad:10px;}
    .brand-logo-wrap,.brand-icon,.app-brand-logo{width:38px!important;height:38px!important;border-radius:12px!important;}
    h1{letter-spacing:-.04em!important;}
}