/* =========================================================
   MASCARADASTV UX023
   SWIPE REAL HOME + REGISTRO 2 PASOS
   ========================================================= */


/* =========================================================
   HOME - ACCESOS DESLIZABLES
   ========================================================= */

@media(max-width:980px){

    .mtv-home-launcher-scroll{
        display:flex !important;
        flex-wrap:nowrap !important;

        gap:8px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        width:100% !important;

        padding:
          2px
          3px
          6px !important;

        scroll-behavior:smooth;

        /*
         * vertical sigue funcionando;
         * horizontal lo manejamos por JS.
         */
        touch-action:pan-y !important;

        overscroll-behavior-x:contain;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        cursor:grab;

        user-select:none;
        -webkit-user-select:none;
    }


    .mtv-home-launcher-scroll::-webkit-scrollbar{
        display:none !important;
    }


    .mtv-home-launcher-scroll.is-dragging{
        cursor:grabbing;

        scroll-snap-type:
          none !important;
    }


    /*
     * Un poquito mayores que antes,
     * pero siguen compactos.
     *
     * 6 accesos ocupan más que la pantalla
     * para que realmente exista desplazamiento.
     */
    .mtv-home-launcher-scroll
    > .mtv-home-app-button{

        flex:
          0 0 76px !important;

        width:
          76px !important;

        min-width:
          76px !important;

        max-width:
          76px !important;

        height:
          70px !important;

        min-height:
          70px !important;

        max-height:
          70px !important;

        padding:
          5px !important;

        gap:
          4px !important;

        border-radius:
          14px !important;

        touch-action:
          pan-y !important;

        scroll-snap-align:
          start;
    }


    .mtv-home-launcher-scroll
    > .mtv-home-app-button
    .mtv-home-app-icon{

        width:
          32px !important;

        height:
          32px !important;

        min-width:
          32px !important;

        min-height:
          32px !important;

        max-width:
          32px !important;

        max-height:
          32px !important;

        flex:
          0 0 32px !important;
    }


    .mtv-home-launcher-scroll
    > .mtv-home-app-button
    .mtv-home-app-icon svg{

        width:
          18px !important;

        height:
          18px !important;
    }


    .mtv-home-launcher-scroll
    > .mtv-home-app-button
    strong{

        font-size:
          8px !important;

        line-height:
          9px !important;
    }

}


/* =========================================================
   REGISTRO 2 PASOS
   ========================================================= */

.mtv-register-original-intro{
    display:none !important;
}


.mtv-register-progress{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:6px;

    margin:
      10px 0
      17px;
}


.mtv-register-progress-item{
    display:flex;

    align-items:center;

    gap:7px;

    min-width:0;

    color:#777;

    font-size:10px;

    font-weight:800;
}


.mtv-register-progress-item::before{
    content:"";

    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:#333;
}


.mtv-register-progress-item.active{
    color:#fff;
}


.mtv-register-progress-item.active::before{
    background:#ed111c;

    box-shadow:
      0 0 0 4px
      rgba(237,17,28,.13);
}


.mtv-register-progress-item.done::before{
    background:#ed111c;
}


.mtv-register-step{
    display:grid;

    gap:10px;
}


.mtv-register-step[hidden]{
    display:none !important;
}


.mtv-register-step-title{
    margin:
      0 0
      3px;

    color:#fff;

    font-size:20px;

    line-height:1.05;

    letter-spacing:-.03em;
}


.mtv-register-step-copy{
    margin:
      0 0
      5px;

    color:#8c8c8c;

    font-size:11px;

    line-height:1.4;
}


.mtv-register-next{
    margin-top:5px;
}


.mtv-register-back{
    width:100%;

    margin-top:2px;
}


.mtv-register-error{
    display:none;

    padding:
      9px
      11px;

    border:
      1px solid
      rgba(237,17,28,.28);

    border-radius:12px;

    background:
      rgba(237,17,28,.08);

    color:#ff9b9f;

    font-size:10px;

    line-height:1.3;
}


.mtv-register-error.show{
    display:block;
}


/*
 * Tipos de perfil:
 * estilo de selección más claro.
 */

#registerForm
.mtv-register-step-2
.profile-checks{

    display:grid !important;

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

    gap:
      7px !important;

    padding:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;
}


#registerForm
.mtv-register-step-2
.profile-checks label{

    min-height:49px;

    display:flex;

    align-items:center;

    gap:6px;

    margin:0;

    padding:
      8px
      9px;

    border:
      1px solid
      rgba(255,255,255,.09);

    border-radius:
      13px;

    background:
      rgba(255,255,255,.035);

    color:#ddd;

    font-size:
      10px !important;

    line-height:
      1.15;

    cursor:pointer;
}


#registerForm
.mtv-register-step-2
.profile-checks label:has(input:checked){

    border-color:
      rgba(237,17,28,.50);

    background:
      rgba(237,17,28,.12);

    color:#fff;
}


#registerForm
.mtv-register-step-2
.profile-checks input{

    width:16px;
    height:16px;

    flex:
      0 0 16px;

    accent-color:
      #ed111c;
}


#registerForm
.account-note{

    margin-top:
      2px;

    font-size:
      9px !important;

    line-height:
      1.35;
}


@media(max-width:390px){

    .mtv-home-launcher-scroll
    > .mtv-home-app-button{

        flex-basis:
          72px !important;

        width:
          72px !important;

        min-width:
          72px !important;

        max-width:
          72px !important;
    }


    #registerForm
    .mtv-register-step-2
    .profile-checks{

        grid-template-columns:
          1fr 1fr !important;
    }

}