*{
    margin:0;
    padding:0;
}

p{
    margin-bottom:0
}

/* MAQUETADO */
    #homepanel{
        display:grid;
        grid-template-columns: repeat(10, 1fr);
        gap:20px;
    }
    .home-cont{
        display:grid;
        gap:20px;
    }

    .home-cont__col1{gap:20px; display:flex; flex-direction:column}
    .home-cont__col2{gap:20px; display:flex; flex-direction:column}
    .home-cont__col3{gap:20px; display:flex; flex-direction:column}


.home-div{grid-column: span 10 / span 10}

@media(min-width:768px){

    .home-cont{grid-column: span 8 / span 8; }
    .home-pub{grid-column: span 2 / span 2; }

    .home-cont{grid-template-columns: repeat(8, 1fr);}
    
    .home-cont__col1{grid-column: span 3 / span 3; gap:20px;}
    .home-cont__col2{grid-column: span 5 / span 5; gap:20px;}
    .home-cont__col3{grid-column: span 8 / span 8; gap:20px;}

}


/* ACCESOS */

.home__accesos{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.home__accesos__titulo{
    font-size: 15px;
    font-weight:bold;
    color: #202124;
}

.home__accesos__listado{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.home__accesos__listado li a,
.home__accesos__listado li button {
    display:flex;
    gap:10px;
    align-items:center;
    color: #5B5D5B;
    padding: 10px 15px;
    border-radius:3px;
    border:1px solid #5B5D5B;
    font-size:14px;
    background-color: #FFFFFF;
    transition: all .5s;
}

.home__accesos__listado li button:hover,
.home__accesos__listado li a:hover{
    background-color: #5B5D5B;
    color:white;
}

.home__accesos__listado li * svg path {
    fill: #5B5D5B;
    transition: all .5s;
}
.home__accesos__listado li *:hover svg path {
    fill:white;
}

.acceso__qr{
    display:inline-flex;
}

#qr_btn{
    width: 100%;
    display: flex;
    border: none;
    gap: 10px;
    background: transparent;
}

#qr_btn:hover{
    background-color:#5B5D5B
}






/* AYUDA */
.home__ayuda{
    background-color:white;
    padding: 18px 10px;
    border-bottom: 5px solid #8F9935;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.home__ayuda__titulo{
    font-size:15px;
    margin:0;
}

.home__ayuda__titulo strong{
    color:rgba(143, 153, 53, 1)
}

.home__ayuda__empleado{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.home__ayuda__empleado img{
    width:80px;
    height:80px;
    border-radius: 100px;
}

.empleado__data{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.empleado__data p{
    font-size:16px;
    font-weight:600;
    color:#222222;
    margin:0;
    padding:0;
}

.empleado__data a{
    color:#5B5D5B;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:5px;
}

.home__ayuda__btn{
    display:flex;
    gap:5px;
    align-items:center;
}

.home__ayuda__btn a{
    padding: 4px 8px;
    display:flex;
    gap:4px;
    color:white;
    font-size:11px;
    border-radius: 3px;
    align-items:center;
    transition: all .5s;
}

.home__ayuda__btn a:hover{
    color:white;
    filter: brightness(.9);
}

.home__ayuda__btn .btn__consulta{background-color: #3C8BB3}
.home__ayuda__btn .btn__whatsapp{background-color: #00A759}

.home__ayuda__horario{
    color:#5B5D5B;
    font-size:12px;
    margin:0;
}









/* BOTONERA */
.home__botonera ul{
    display:flex;
    list-style:none;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
}

.home__botonera ul li a{
    background-color: #3C8DBC;
    color:white;
    border-radius:3px;
    padding:5px 13px;
    width:100%;
    display:inline-flex;
    font-size:14px;
    transition: all .5s;
    align-items:center;
    gap:5px;
}

.home__botonera ul li a:hover{
    background-color:#307196;
}

.home__botonera ul li a i{
    font-size: 13px;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: #307196;
    border-radius: 100px;
    padding: 5px;
}

@media(min-width:768px){
    .home__botonera ul{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
    }
}










/* TERMINOS */

.home__terminos a{
    color:#5B5D5B;
    display:flex;
    justify-content:center;
    padding:0;
    margin:0;
    font-size:12px;
    gap:10px;
    align-items:center;
}









/* PUB */
.home-pub{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.home-pub img{
    width:100%;
    height:auto;
}


/* SALDO */

.home__saldo{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.home__saldo__pendiente{
    display:flex;
    flex-direction:column;
    gap:5px;
}
.home__saldo__pendiente,
.home__saldo__ok,
.home__saldo__no {
    font-size:25px;
    font-weight:600;
}
.home__saldo__pendiente__row {
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: space-between;
}
.home__saldo__no {
    background-color: #a94442;
    color:white;
    padding:15px;
    font-size:20px;
}
.home__saldo__pendiente__row *:last-child {
    color: #a94442
}

.home__saldo__ok {
    background-color:#909A34;
    color:white;
    display:flex;
    gap:10px;
    align-items:center;
    padding:15px;
    font-size:20px;
}

.home__saldo__documento {
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: space-between;
    font-size:12px;
    color:#202124;
    margin:0;
    transition:all .5s;
}
.home__saldo__documento a,
.home__saldo__documento a:hover,
.home__saldo__documento a:visited {
    color: inherit;
}

:is(.home__saldo__pendiente, .home__saldo__ok) i{
    margin-right:5px;
}

.home__saldo__pendiente__row:last-of-type a:hover{
    font-weight:600;
    cursor:pointer;
}

.home__saldo__debauto{
    background-color: #FFFFFF;
    color:#333;
    padding: 10px 14px 0;
    display:flex;
    align-items:center;
    gap:24px;
    transition:all .8s;
    width:100%;
    border-top: 1px solid #D3D3D3;
}

#saldo-debito:is(:empty),
#saldo-metodos_pagos:is(:empty) {
    display: none;
}


.home__saldo__debauto:is(a):hover > p{
    color:#E67600;
}

.home__saldo__debauto i{
    font-size:32px;
    color: #FF8300;
}

.home__saldo__debauto__txt{
    width:100%;
}

.home__saldo__debauto__txt > p{
    font-size: 16px;
    color: #FF8300;
    font-weight:700;
}

.home__saldo__debauto__txt > div{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content: space-between;
    font-size: 12px;
}


/* Metodos */
.home__saldo__metodos{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:10px;
    border-top:1px solid #D3D3D3;
}

.home__saldo__metodos p:first-of-type{
    color:#5B5D5B;
    font-size:14px;
    font-weight: 600;
}

.home__saldo__metodos p:last-of-type{
    color:#5B5D5B;
    text-align:center;
    font-size:12px;
}

.home__saldo__metodos ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.home__saldo__metodos ul li a{
    color: #5B5D5B;
    background-color: #F4F4F4;
    width:100%;
    padding: 10px 15px;
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid #DDDDDD;
    transition: all 1s;
    cursor:pointer;
}
.home__saldo__metodos ul li a:hover{
    background-color: #e4e4;
}

.home__saldo__footer{
    display:flex;
    flex-direction: column;
    align-items:flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #D3D3D3;
}

.home__saldo__footer p{
    color: #5B5D5B;
    font-size:12px;
    display:inline-block;
}

.home__saldo__footer a{
    display:inline-flex;
    background-color:#00A65A;
    transition: all .5s;
    color:white;
    align-items:center;
    gap:5px;
    padding: 5px 10px;
    font-weight:600;
    border-radius:3px;
    text-decoration:none;
}

.home__saldo__footer a:hover{
    background-color:#008E4D;
    color:white;
}



.home__saldo__plan__titulo{
    color: #909A34;
    font-size:16px;
    font-weight: 700;
    display:inline-block;
}

.home__saldo__plan__incluye{
    font-size:12px;
    text-decoration:underline;
    color:#3C8DBC;
    font-weight:600;
    transition: all 1s;
    display:inline-block;
}

.home__saldo__plan__incluye:hover{
    font-weight: 700;
    color: #33769D;
}

.home__saldo__plan__nombre{
    margin-top:5px;
    font-weight:700;
    font-size:16px;
}


/* Saludo header */


.header__saludo {
    display: none;
    gap: 10px;
    margin-left: 10px;
    align-items: center;
    min-height:50px;
}
.header__saludo + img {
    max-height: 25px !important;
    margin: 15px 0 0 15px !important;
}
@media(min-width:768px) {
    .header__saludo {
        display: inline-flex;
    }
}
@media(max-width:767px) {
    .main-sidebar {
        padding-top: 50px !important;
    }
}
  
  .header__saludo img{
    height: 35px;
  }
  
  .header__saludo p{
    margin:0;
    padding:0;
    color: #5A585F;
    font-weight:bold;
    font-size: 14px;
  }

  /* MENU NUEVO */

ul.dropdown-menu.mainmenu{
  background-color: #FFFFFF;
  padding:20px !important;
}

.fa.fa-twitter-square::before {
    content:"𝕏";
}

  .navbar-nav .dropdown-menu {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
  }

  .mainmenu li a{
    padding: 10px 0 !important;
  }

  .mainmenu__prop{
    display:flex;
    gap:10px;
    align-items:center;
    border-bottom: 1px solid #9F9F9F;
  }

  .mainmenu__prop img{
    height:32.5px;
  }

  .mainmenu__prop p{
    font-size:15px;
    font-weight: 700;
    color: #5A585F;
    
  }

    .mainmenu__link a{
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        transition: all .5s;
        cursor:pointer;
    }

    .mainmenu__link a:hover{
        background-color: #D9D9D9;
    }

    .mainmenu__link a > div{
        display:flex;
        gap: 20px;
        align-items:center;
    }

    .mainmenu__link div p{
        font-size:14px;
        font-weight: 600;
        color: #3A3A3A;
    }

    .mainmenu__footer{
        font-size:12px;
        text-align:right;
        color:#5A585F;
    }

    .mainmenu__footer i{
        margin-right:5px;
    }

    .mainmenu__gracias{
        font-weight:bold
    }

    .mainmenu__plan svg{
        height:10px;
    }

    .mainmenu__plan p{
        font-size:10px !important;
        color: #3A3A3A;
    }

    .mainmenu__plan{
        display:flex;
        gap: 5px;
        align-items: center;
    }

#home__container{
    background-color:white;
}



/* BOTON MERCADO PAGO */

.btn-mp{
    display: inline-flex;
    background-color: #009ee3;
    transition: all .5s;
    color: white !important;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    font-size:14px;   
}

.btn-mp:hover{
    background-color: #007eb5;
}

.btn-filtro {
    box-sizing: border-box;
    position: relative;
    border-radius: 8px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(124, 152, 167) !important;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.btn-filtro span {
    margin-right: 5px;
}
.btn-filtro img {
    width: 15px;
    margin-left: 5px;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
}
.btn-filtro[aria-expanded="true"] img {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* PLAN BIENVENIDA HOME */

.miplan{
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 10px 15px;
    gap: 10px;
}


.miplan__txt{
    display:flex;
    flex-direction:column;
    gap: 5px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.miplan__titulo{
    color:#5B5D5B;
    font-size:16px;
    font-weight:600;
}

.miplan__nombre{
    color: #909A34;
    font-weight:700;
}

.miplan__incluye{
    color: #33769D;
    font-size:12px;
    text-decoration: underline;
    cursor:pointer;
    line-height:130%;
    white-space: nowrap;
}

.miplan__precio{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content: flex-end;
}

.miplan__tachado{
    font-size: 12px;
    color: #737373;
    text-decoration:line-through;
}

.miplan__actual{
    color: #000000;
    font-size:16px;
    font-weight: 700;
}

@media screen and (min-width:768px){
    .miplan__txt{
        flex-direction:row;
        align-items:center;
    }
}

/* BONIFICACION */

.bonificacion{
    display:flex;
    color: #ffffff;
    padding: 10px;
    border-radius: 3px;
    flex-direction:column;
    gap:5px;
}

.bonificacion__ahorro{
    font-size:18px !important;
    font-weight:bold;
}

.bonificacion__title-container{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.bonificacion__titulo{
    font-size:14px;
    font-weight: 700;
    line-height:130%;
    color: #5B5D5B;
}

.bonificacion__smile{
    width:18px;
    height:18px;
}

.bonificacion__lista{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    background: #8F9935;
    color: #FFFFFF;
    padding:10px;
}



.bonificacion__lista-item{
    font-size:12px;
    display:flex;
    align-items:center;
    gap:3px;
}

.bonificacion__bold, .bonificacion__valor{
    font-weight:700;
}

.bonificacion__frase{
    text-align:center;
    font-size:12px;
    margin-top:5px;
}

.bonificacion__icon{
    width:12px;
    height:12px;
    margin-right:2px;
    filter: invert(99%) sepia(8%) saturate(590%) hue-rotate(210deg) brightness(117%) contrast(100%);
}


.bonificacion__publicaciones{
    display:flex;
    align-items:center;
    font-size:14px;
    color:#000;
    gap:3px;
}

.bonificacion__publicaciones img{
    filter:none;
    margin-right:5px;
}

.bonificacion__sinpublicaciones{
    display:flex;
    gap:10px;
    font-size: 13px;
    font-weight:600;
    background-color: #EFEFEF;
    color: #3B3B3B;
    padding: 5px 10px;
    border-radius:3px;
}

.bonificacion__sinpublicaciones img{
    width:20px;
    height:20px;
    
    filter: none;
}

/* MODAL QUE INCLUYE MI PLAN */

.modal-plan{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1100;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    pointer-events:none;
    opacity: 0;
    animation: fade-in .5s;
    transition: all .5s;
}

.modal-plan--open{
    pointer-events: auto;
    opacity: 1;
}

@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

.modal-plan__shadow{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgba(0, 0, 0, 0.50);
    cursor:pointer;
    z-index:1101;
    opacity:0;
}



.modal-plan--open .modal-plan__container{
    display:flex;
}



.modal-plan--open .modal-plan__shadow{
    opacity:1;
}

.modal-plan__container{
    background-color:#FFFFFF;
    padding:30px;
    border-radius:10px;
    position:relative;
    z-index:1102;
    display:none;
    flex-direction:column;
    gap:15px;
    transition: all .5s;
    animation: downtoup .5s;
}

@media screen and (min-width:768px){
    .modal-plan__container{
        min-width: 550px;
        max-width: 100%;
    }   
}


 @keyframes downtoup{
    from{
        transform: translateY(100px);
    }
    to{
        transform: translateY(0);
    }
 }

.modal-plan__times{
    width:12px;
    height:12px;
    position:absolute;
    top:20px;
    right:20px;
    cursor:pointer;
}


.modal-plan__title{
    font-size:18px;
    font-weight:700;
    color: #3b3b3b;
}

.modal-plan__nombre{
    color: #909A34;
}

.modal-plan__body{
    display:flex;
    flex-direction:column;
    gap:5px;

}

.modal-plan__pregunta{
    font-size:16px;
    line-height: 130%;
    color: #3b3b3b;
    font-weight: 700;
}

.modal-plan__contenido{
    font-size:12px;
    color: #000000;
    height: 300px;
}

.modal-plan__contenido iframe {
    height: 100%;
    width: 100%;
}

.modal-plan__footer{
    display:flex;
    justify-content:flex-end;
}

.modal-plan__btn{
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:100px;
    border:1px solid #FF8300;
    color: #3b3b3b;
    transition: all .5s;
    padding:0 10px;
    line-height:28px;
    background-color: #FFFFFF;
}

.modal-plan__btn:hover{
    background-color: #E67600;
    color:white; 
}
/* 
.modal-plan__contenido h4, .modal-plan__contenido h4 font{
    font-size:10px;
}

.modal-plan__contenido br{
    display:none;
}

.modal-plan__contenido h4:last-child{
    margin-bottom:0;
    padding-bottom:0;
}


.modal-plan__contenido li{
    background: url("./img/icon_check.svg") no-repeat left center;
    background-size: 12px 12px;
    padding-left: 17px;
}

.modal-plan__contenido ul{
    list-style:none;
}

.modal-plan__contenido li ul li{
    background:none;
    padding-left:0;
}

@media screen and (min-width:768px){
    .modal-plan__container{
        max-width: 550px
    }   
} */


/* BLOQUE RECOMENDAR */

.recomendar{
    width:100%;
    display:flex;
    flex-direction:column;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #5B5D5B;
    background-color: #FFFFFF;
    border-radius:3px;
    cursor:pointer;
    transition: all .5s;
}

.recomendar:hover{
    background-color: #F4F4F4;
}

.recomendar__titulo{
    display:flex;
    align-items:center;
    gap: 10px;
    font-size:14px;
    font-weight: 700;
    color: #8F9935;
}

.recomendar__titulo-icon{
    height:22px;
    width:22px;
    filter: invert(55%) sepia(49%) saturate(542%) hue-rotate(26deg) brightness(95%) contrast(83%);
}

.recomendar__txt{
    font-size:13px;
    color: #5B5D5B;
    margin:0;
}

.recomendar__cta{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
    color: #5B5D5B;
    font-weight: 700;
    font-size:12px;
    line-height:12px;
    width:100%;
}

.recomendar__cta-icon{
    filter: invert(36%) sepia(6%) saturate(112%) hue-rotate(71deg) brightness(93%) contrast(88%);
    height: 16px;
    width: 16px;
}

/* FIN BLOQUE RECOMENDAR */