/* ==========================================================
   INVITACIONES 2.0
   BUILDER UI CLEAN V2

   NO modifica la invitacion publica.
   Solo /builder
   ========================================================== */


body.builder-clean-v2{

    --builder-bg:#f3f4f6;

    --builder-panel:#ffffff;

    --builder-panel-soft:#f8fafc;

    --builder-border:#e2e5e9;

    --builder-border-strong:#cfd5dd;

    --builder-text:#17191d;

    --builder-muted:#707782;

    --builder-button:#ffffff;

    --builder-button-hover:#f3f4f6;

    --builder-active:#17191d;

    --builder-active-text:#ffffff;

    --builder-success:#23723a;

    --builder-danger:#b42318;

    --builder-shadow:
        0 4px 14px
        rgba(17,24,39,.055);

    background:
        var(--builder-bg)
        !important;

    color:
        var(--builder-text)
        !important;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

body.builder-clean-v2.builder-dark-v2{

    --builder-bg:#0b1220;

    --builder-panel:#111a2a;

    --builder-panel-soft:#162133;

    --builder-border:#26354a;

    --builder-border-strong:#3b4b62;

    --builder-text:#f4f6f8;

    --builder-muted:#9aa8ba;

    --builder-button:#172235;

    --builder-button-hover:#202e44;

    --builder-active:#f2f4f7;

    --builder-active-text:#111827;

    --builder-success:#43d17b;

    --builder-danger:#ff8585;

    --builder-shadow:
        0 7px 20px
        rgba(0,0,0,.20);
}


/* ==========================================================
   PAGINA
   ========================================================== */

body.builder-clean-v2 main{

    background:
        var(--builder-bg)
        !important;

    color:
        var(--builder-text)
        !important;
}


body.builder-clean-v2 .builder-topbar{

    min-height:58px;

    margin-bottom:12px !important;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;
}


body.builder-clean-v2 .builder-topbar strong{

    color:
        var(--builder-text)
        !important;
}


body.builder-clean-v2 .builder-back{

    color:
        var(--builder-muted)
        !important;
}


/* ==========================================================
   LAYOUT 3 COLUMNAS
   ========================================================== */

body.builder-clean-v2 .builder-layout{

    display:grid !important;

    grid-template-columns:
        270px
        minmax(440px,1fr)
        310px
        !important;

    height:
        calc(100vh - 145px)
        !important;

    min-height:680px;

    overflow:hidden;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        16px
        !important;

    background:
        var(--builder-panel)
        !important;

    box-shadow:
        var(--builder-shadow)
        !important;
}


/* ==========================================================
   PANELES
   ========================================================== */

body.builder-clean-v2 .builder-left{

    width:auto !important;

    min-width:0 !important;

    max-width:none !important;

    padding:
        15px
        !important;

    background:
        var(--builder-panel)
        !important;

    border-right:
        1px solid
        var(--builder-border)
        !important;

    overflow-y:auto;
}


body.builder-clean-v2 .builder-right{

    width:auto !important;

    min-width:0 !important;

    max-width:none !important;

    padding:
        16px
        !important;

    background:
        var(--builder-panel)
        !important;

    border-left:
        1px solid
        var(--builder-border)
        !important;

    overflow-y:auto;
}


body.builder-clean-v2 .builder-center{

    background:
        var(--builder-bg)
        !important;

    padding:
        18px
        !important;

    overflow:auto;
}


/* ==========================================================
   SECCIONES IZQUIERDA
   ========================================================== */

body.builder-clean-v2 .builder-section{

    margin:
        0 0 20px
        !important;

    padding:0;
}


body.builder-clean-v2 .builder-section > strong{

    display:block;

    margin:
        0 0 9px
        !important;

    color:
        var(--builder-text)
        !important;

    font-size:
        13px
        !important;

    font-weight:
        800
        !important;
}


/* ==========================================================
   INICIO
   ========================================================== */

body.builder-clean-v2 .builder-intro-section{

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        var(--builder-border)
        !important;
}


body.builder-clean-v2 .builder-intro-item{

    width:100%;

    min-height:58px;

    margin-top:8px;

    padding:
        9px 10px
        !important;

    display:flex;

    align-items:center;

    gap:9px;

    background:
        var(--builder-button)
        !important;

    color:
        var(--builder-text)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        11px
        !important;

    box-shadow:none !important;
}


body.builder-clean-v2 .builder-intro-item.active{

    background:
        var(--builder-active)
        !important;

    color:
        var(--builder-active-text)
        !important;

    border-color:
        var(--builder-active)
        !important;
}


body.builder-clean-v2 .builder-intro-item.active strong,
body.builder-clean-v2 .builder-intro-item.active small{

    color:
        var(--builder-active-text)
        !important;
}


/* ==========================================================
   PAGINAS
   ========================================================== */

body.builder-clean-v2 .builder-section-head{

    margin-bottom:8px;
}


body.builder-clean-v2 .builder-section-head strong{

    color:
        var(--builder-text)
        !important;

    font-size:13px;

    font-weight:800;
}


body.builder-clean-v2 .builder-section-head button{

    width:34px !important;

    min-width:34px !important;

    height:34px !important;

    min-height:34px !important;

    padding:0 !important;

    border-radius:
        10px
        !important;

    background:
        var(--builder-button)
        !important;

    color:
        var(--builder-text)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    box-shadow:none !important;
}


body.builder-clean-v2 .builder-page-item{

    min-height:42px;

    margin-bottom:6px;

    padding:
        8px 10px
        !important;

    border-radius:
        10px
        !important;

    background:
        var(--builder-button)
        !important;

    color:
        var(--builder-text)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    box-shadow:none !important;
}


body.builder-clean-v2 .builder-page-item.active{

    background:
        var(--builder-active)
        !important;

    color:
        var(--builder-active-text)
        !important;

    border-color:
        var(--builder-active)
        !important;
}


body.builder-clean-v2 .builder-page-item.active strong{

    color:
        var(--builder-active-text)
        !important;
}


/* ==========================================================
   GRID REAL DE ELEMENTOS

   JS coloca TODOS los builder-tool aquí.
   ========================================================== */

body.builder-clean-v2 .builder-tools-grid-v2{

    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        )
        !important;

    gap:
        8px
        !important;

    width:100%;
}


/* CUADRADOS */

body.builder-clean-v2 .builder-tools-grid-v2 .builder-tool{

    width:100% !important;

    aspect-ratio:
        1 / 1
        !important;

    min-width:0 !important;

    min-height:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:
        6px 4px
        !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:5px !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        11px
        !important;

    background:
        var(--builder-button)
        !important;

    color:
        var(--builder-text)
        !important;

    box-shadow:none !important;

    text-align:center !important;

    line-height:
        1.05
        !important;

    font-weight:
        700
        !important;

    cursor:pointer;

    overflow:hidden;
}


body.builder-clean-v2 .builder-tools-grid-v2 .builder-tool:hover{

    background:
        var(--builder-button-hover)
        !important;

    border-color:
        var(--builder-border-strong)
        !important;

    transform:none !important;
}


body.builder-clean-v2 .builder-tool-icon-v2{

    width:25px;

    height:25px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:
        7px;

    background:
        var(--builder-panel-soft);

    color:
        var(--builder-text);

    font-size:
        14px;

    font-weight:
        800;
}


body.builder-clean-v2 .builder-tool-label-v2{

    width:100%;

    display:block;

    color:
        var(--builder-text)
        !important;

    font-size:
        10px
        !important;

    font-weight:
        750
        !important;

    line-height:
        1.05
        !important;

    text-align:center;

    white-space:
        normal;

    overflow-wrap:
        break-word;

    word-break:
        normal;
}


/* ==========================================================
   CANVAS / SIMULADOR
   ========================================================== */

body.builder-clean-v2 .builder-stage-toolbar{

    margin-bottom:
        8px;
}


body.builder-clean-v2 .stage-zoom{

    padding:
        6px
        !important;

    gap:5px;

    background:
        var(--builder-panel)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        12px
        !important;

    box-shadow:
        var(--builder-shadow)
        !important;
}


body.builder-clean-v2 .stage-zoom button{

    height:34px;

    min-width:34px;

    padding:
        0 10px
        !important;

    border-radius:
        9px
        !important;

    box-shadow:none !important;

    background:
        var(--builder-button)
        !important;

    color:
        var(--builder-text)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;
}


body.builder-clean-v2 #zoom-reset{

    background:
        var(--builder-active)
        !important;

    color:
        var(--builder-active-text)
        !important;

    border-color:
        var(--builder-active)
        !important;
}


body.builder-clean-v2 .phone-shell{

    border-radius:
        30px
        !important;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.16)
        !important;
}


/* ==========================================================
   INSPECTOR
   ========================================================== */

body.builder-clean-v2 .builder-right h3{

    color:
        var(--builder-text)
        !important;

    font-size:
        15px
        !important;

    margin-bottom:
        14px
        !important;
}


body.builder-clean-v2 .builder-muted,
body.builder-clean-v2 .prop-field span,
body.builder-clean-v2 .global-media-label{

    color:
        var(--builder-muted)
        !important;
}


body.builder-clean-v2 input,
body.builder-clean-v2 textarea,
body.builder-clean-v2 select{

    background:
        var(--builder-panel-soft)
        !important;

    color:
        var(--builder-text)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        10px
        !important;

    box-shadow:none !important;
}


body.builder-clean-v2 .global-media-card,
body.builder-clean-v2 .media-info-card{

    background:
        var(--builder-panel-soft)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    border-radius:
        11px
        !important;
}


body.builder-clean-v2 .global-media-empty{

    border-color:
        var(--builder-border)
        !important;

    color:
        var(--builder-muted)
        !important;
}


body.builder-clean-v2 .builder-action{

    background:
        var(--builder-active)
        !important;

    color:
        var(--builder-active-text)
        !important;

    border:
        1px solid
        var(--builder-active)
        !important;

    box-shadow:none !important;

    border-radius:
        10px
        !important;
}


body.builder-clean-v2 .builder-danger{

    background:
        transparent
        !important;

    color:
        var(--builder-danger)
        !important;

    border:
        1px solid
        var(--builder-border)
        !important;

    box-shadow:none !important;

    border-radius:
        10px
        !important;
}


/* ==========================================================
   TOP BUTTONS
   ========================================================== */

body.builder-clean-v2 .builder-save-btn{

    background:
        var(--builder-active)
        !important;

    color:
        var(--builder-active-text)
        !important;

    border:
        1px solid
        var(--builder-active)
        !important;

    border-radius:
        10px
        !important;

    box-shadow:none !important;
}


body.builder-clean-v2 .save-status{

    color:
        var(--builder-success)
        !important;
}


/* ==========================================================
   THEME BUTTON
   ========================================================== */

body.builder-clean-v2 .builder-theme-toggle-v2{

    height:38px;

    padding:
        0 12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    background:
        var(--builder-button);

    color:
        var(--builder-text);

    border:
        1px solid
        var(--builder-border);

    border-radius:
        10px;

    box-shadow:none;

    font-size:
        12px;

    font-weight:
        700;

    cursor:pointer;
}


body.builder-clean-v2 .builder-theme-toggle-v2:hover{

    background:
        var(--builder-button-hover);
}


body.builder-clean-v2 .builder-theme-dot-v2{

    width:8px;

    height:8px;

    border-radius:50%;

    background:
        var(--builder-text);
}


/* ==========================================================
   ADMIN SIDEBAR EN DARK
   ========================================================== */

body.builder-clean-v2.builder-dark-v2 .app > aside{

    background:
        #0d1523
        !important;

    border-color:
        var(--builder-border)
        !important;
}


body.builder-clean-v2.builder-dark-v2 .app > aside nav a,
body.builder-clean-v2.builder-dark-v2 .app > aside nav span,
body.builder-clean-v2.builder-dark-v2 .app > aside .logo,
body.builder-clean-v2.builder-dark-v2 .account strong{

    color:
        var(--builder-text)
        !important;
}


body.builder-clean-v2.builder-dark-v2 .account{

    border-color:
        var(--builder-border)
        !important;
}


/* ==========================================================
   SCROLL
   ========================================================== */

body.builder-clean-v2 *::-webkit-scrollbar{

    width:8px;
}


body.builder-clean-v2 *::-webkit-scrollbar-track{

    background:
        transparent;
}


body.builder-clean-v2 *::-webkit-scrollbar-thumb{

    background:
        #cbd0d7;

    border-radius:
        20px;
}


body.builder-clean-v2.builder-dark-v2 *::-webkit-scrollbar-thumb{

    background:
        #425168;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1350px){

    body.builder-clean-v2 .builder-layout{

        grid-template-columns:
            245px
            minmax(400px,1fr)
            285px
            !important;
    }

}


@media(max-width:1050px){

    body.builder-clean-v2 .builder-layout{

        grid-template-columns:
            230px
            minmax(380px,1fr)
            !important;

        height:auto !important;
    }


    body.builder-clean-v2 .builder-right{

        grid-column:
            1 / -1;

        border-left:0 !important;

        border-top:
            1px solid
            var(--builder-border)
            !important;
    }

}