@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    scrollbar-gutter: stable !important;
}

html{
    scroll-behavior: smooth;
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.fade {
    transition: opacity 0.5s;
    opacity: 0
}

.fade-in {
    opacity: 1
}

.slick-track {
    gap: 1rem !important;
}

.content-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    /* background: #0d354b75; */
    background: #ffffffce;
}

.position-loader {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    top: 45vh;
}

.loader {
    width: 80px;
    padding: 9px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #00000099;
    --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1.2s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

/**Carrusel de Especialidades***/
.contentEspecialidades .especialidad img{
    object-fit: cover;
}
.contentEspecialidades .slick-prev, .contentEspecialidades .slick-next {
    position: absolute !important;
    top: -35px !important;
}


@media(max-width:992px) {
    .contentEspecialidades .slick-prev, .contentEspecialidades .slick-next {
        display: none !important;
    }
}

.contentEspecialidades .slick-prev:before, .contentEspecialidades .slick-next:before {
    font-size: 34px !important;
    color: rgb(37, 190, 213) !important;
}


.contentEspecialidades .slick-prev {
    left: unset !important;
    right: 58px !important;
}

.contentEspecialidades .slick-next {
    right: 17px !important;
}


/**Resto de carruseles****/

.todosCarruseles .slick-prev:before, .todosCarruseles .slick-next:before {
    font-family: 'slick';
    font-size: 40px !important;
    line-height: 1;
    opacity: 1 !important;
    color: red !important;
    -webkit-font-smoothing: antialiased;
    color: #EA8454 !important;
}

.todosCarruseles .slick-prev {
    left: 7px !important;
    z-index: 2 !important;
}


.todosCarruseles .slick-next {
    right: 29px !important;
    z-index: 2 !important;
}


/***Carrusel Principal****/

/*.carruselPrincipal .slick-next:before {

}*/


.carruselPrincipal .slick-prev:before, .carruselPrincipal .slick-next:before {
    font-family: 'slick';
    font-size: 40px !important;
    line-height: 1;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
    content: url(../img/flecha.svg) !important;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(298deg) brightness(102%) contrast(102%) !important;
    transform: rotate(270deg) !important;
    display: block;
}

.carruselPrincipal .slick-prev:before {
    transform: rotate(89deg) !important;
    display: block !important;
}


.carruselPrincipal .slick-prev {
    left: 38px !important;
    z-index: 2 !important;
    width: 45px !important;
    height: 45px !important;
}


.carruselPrincipal .slick-next {
    right: 29px !important;
    z-index: 2 !important;
    width: 45px !important;
    height: 45px !important;
}
/***Animación de hamburgesa con X**/
.btnMenu {
    transition: all .3s ease-out,right .2s ease-out;
}

    .btnMenu span {
        width: 22px;
        height: 2px;
        background-color: #624963;
        margin: 3px 0;
        display: block;
        clear: both;
        float: right;
        transition: all .3s ease-out,right .2s ease-out;
    }

    .btnMenu.open span {
        opacity: 0;
    }

        .btnMenu.open span:first-child {
            opacity: 1;
            transform: rotate(-45deg) translate(-7px, 6px);
            width: 20px;
        }

        .btnMenu.open span:last-child {
            opacity: 1;
            transform: rotate(45deg) translate(-5px,-5px);
            width: 20px;
        }

/***Opacidad Sobre ELementos***/
.opacidadSobreElementos {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    bottom: 81px;
    height: 29px;
    position: relative;
}


/***Selección categorias****/
.activeCategoria {
    background-color: rgb(248, 248, 248);
    border-radius: .5rem;
}

.activeCategoria p{
    font-weight:bold;
}

.activeCategoria p span{
    font-weight:normal;
}

/***Tablas***/
@media(max-width:992px){
    table{
        width:64rem !important;
    }
}

/****Estilos a scroll en barra de busqueda***/
.productosDeBusqueda::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

.productosDeBusqueda::-webkit-scrollbar-track {
    background: white; /* color of the tracking area */
}

.productosDeBusqueda::-webkit-scrollbar-thumb {
    background-color: rgb(191, 191, 191); /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: 3px solid white; /* creates padding around scroll thumb */
}

/**Footer**/
footer{
    position: relative;
    margin-top: auto;
}
.img-prof {
    max-width: 100%;
    width: 20rem;
    margin-bottom: .5rem;
    filter: invert(50%) sepia(0%) saturate(1%) hue-rotate(251deg) brightness(185%) contrast(100%);
}

.bottom-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media(max-width:1024px){
    .bottom-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.listSfe li::before{
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    background: #25BED5;
    border-radius: 50%;
    position: absolute;
    margin-left: -12px;
    margin-top: 10px;
}
/* .facturaSelect{
    background: #F1F5F9;
    color: #828282;
} */
.activeFactura{
    background: #25BED5 !important;
    color: #fff !important;
}

.notificacionSombra {
    box-shadow: 0 4px 21px 3px #e2e2e2;
}
 
.cuadriculaBusqueda{
    width: 100%;
}
.cuadriculaBusqueda .producto.w-60{
    width: calc(25% - 10px);
    padding: 15px;
    margin: 10px 5px;
    /* box-shadow: 0px 0px 4px 0px rgba(219,219,219,1); */
    /* box-shadow: 0px 0px 4px 1px rgba(219,219,219,1); */
    position: relative;
    transition: all .3s ease-in-out;
}
/* .cuadriculaBusqueda .producto.w-60:hover{
    box-shadow: 0px 0px 4px 0px rgb(196, 195, 195);
    border-radius: 5px;
} */



.cuadriculaBusqueda .producto.w-60:nth-child(4n+2)::before, 
.cuadriculaBusqueda .producto.w-60:nth-child(4n+3)::before,  
.cuadriculaBusqueda .producto.w-60:nth-child(4n+4)::before  {
    content: '';
    width: 1px;
    height: 70%;
    background: #ddd;
    position: absolute;
    display: block;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
} 
@media (max-width: 1280px) {
    .cuadriculaBusqueda .producto.w-60{
        width: calc(33.333% - 10px);
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+3)::before,  
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+4)::before {
        display: none;
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+3)::before {
        content: '';
        width: 1px;
        height: 70%;
        background: #ddd;
        position: absolute;
        display: block;
        left: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    } 
    
}
@media (max-width: 1024px) {
    .cuadriculaBusqueda .producto.w-60{
        width: calc(25% - 10px);
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+3)::before {
        display: none;
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+3)::before,  
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+4)::before  {
        content: '';
        width: 1px;
        height: 70%;
        background: #ddd;
        position: absolute;
        display: block;
        left: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    } 
   
}
@media (max-width: 768px) {
    .cuadriculaBusqueda .producto.w-60{
        width: calc(33.333% - 10px);
    }
   /*  .cuadriculaBusqueda .producto.w-60::after{
        content: '';
        width: calc(100% + 15px);
        height: 1px;
        background: #ddd;
        position: absolute;
        display: block;
        bottom: 0;
    } */
    
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+3)::before,  
    .cuadriculaBusqueda .producto.w-60:nth-child(4n+4)::before  {
        display: none;
    } 
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+3)::before {
        display: block;
    }
}
@media (max-width: 640px) {
    .cuadriculaBusqueda .producto.w-60{
        width: calc(50% - 10px);
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+2)::before, 
    .cuadriculaBusqueda .producto.w-60:nth-child(3n+3)::before {
        display: none;
    }
    .cuadriculaBusqueda .producto.w-60:nth-child(2n+2)::before{
        display: block;
    }
}

/*Agrega confirma contraseña*/
.textGreenEnable {
    --tw-text-opacity: 1;
    color: #14AA1D !important;
}

input[readonly] {
    background-color: rgb(232,240,254,1);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.inputSuscripcion{
    padding: 12px 16px;
    border-radius: 5px;
    border: solid 1px #D6D6D6;
    width: 100%;
}
.inputSuscripcion:focus{
    padding: 12px 16px;
    border-radius: 5px;
    border: solid 1px #D6D6D6;
    outline: none;
}

.inputSuscripcion.borderinvalido{
    border: solid 1px red;
}

.controlesFlechas{
    width: 90px !important;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 15px;
}
.carruselEspecialidades .swiper-button-prev:after {
    content: " " !important;
    border-radius: 50%;
    background-image: url('../img/izquierdaOpcional.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
    right: 0;
    position: absolute !important;
}
.carruselEspecialidades .swiper-button-next:after{
    content: " " !important;
    border-radius: 50%;
    background-image: url('../img/derechaOpcional.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
}

.carruselEspecialidades .swiper-button-next:hover:after,
.carruselEspecialidades .swiper-button-prev:hover:after {
    box-shadow: 0 0 4px 0 #25bed5, 0 0 3px 0 #ff7d01
}
    .carruselProductos .swiper-button-prev:after {
        content: " " !important;
        border-radius: 50%;
        background-image: url('../img/izquierda.webp');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        right: 0;
        position: absolute !important;
    }
.carruselProductos .swiper-button-next:after{
    content: " " !important;
    border-radius: 50%;
    background-image: url('../img/derecha.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}
.text-Xultophy{
    color: #EB2B92;
}
.contenedor-Xultophy .bgSuscripcion{
    background: #EB2B92;
}
.contenedor-Xultophy .bgSuscripcionOpacity{
    background: #EB2B922a;
}

.text-Ozempic{
    color: #005665;
}
.contenedor-Ozempic .bgSuscripcion{
    background: #005665;
}
.contenedor-Ozempic .bgSuscripcionOpacity{
    background: #0056652a;
}

.text-Rybelsus{
    color: #4C25A3;
}
.contenedor-Rybelsus .bgSuscripcion{
    background: #4C25A3;
}
.contenedor-Rybelsus .bgSuscripcionOpacity{
    background: #4C25A32a;
}

.text-Ryzodeg{
    color: #0081C5;
}
.contenedor-Ryzodeg .bgSuscripcion{
    background: #0081C5;
}
.contenedor-Ryzodeg .bgSuscripcionOpacity{
    background: #0081C52a;
}

.text-Tresiba{
    color: #0C3440;
}
.contenedor-Tresiba .bgSuscripcion{
    background: #0C3440;
}
.contenedor-Tresiba .bgSuscripcionOpacity{
    background: #0C34402a;
}

.submenuHeader{
    display: none;
}
@media (min-width: 1024px) {
    
    .cntntMenu:hover .submenuHeader,
    .cntntMenu .submenuHeader:hover {
        display: block
    }
    .submenuHeaders {
        max-height: calc(100vh - 150px) ;
    }
    .overflowMenu{
        max-height: calc(100vh - 15rem);
        overflow-y: auto;
    }
}

@media (min-width: 1024px) and (max-height: 847px) {
    .submenuHeader.contenEspecialidades{
        background: #FFFFFF;
    }
    .submenuHeader.contenEspecialidades .clasificaciones{
        height: calc(80vh - 120px);
        overflow-y: auto;
    }
    .submenuHeader.contenEspecialidades .clasificaciones::-webkit-scrollbar {
        width: 5px;
    }
    
    .submenuHeader.contenEspecialidades .clasificaciones::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 5px;
    }
    
    .submenuHeader.contenEspecialidades .clasificaciones::-webkit-scrollbar-thumb {
        background: #25BED5;
        border: solid .2px #F5F5F5;
        border-radius: 100px;
    }
}

@media (min-width: 1024px) and (max-height: 580px) {
    .submenuHeader.contenSuscripciones .listaSuscripciones,
    .submenuHeader.programaPacientes .listaProgramaPacientes{
        height: calc(80vh - 120px);
        overflow-y: auto;
    }
    .submenuHeader.contenSuscripciones .listaSuscripciones::-webkit-scrollbar,
    .submenuHeader.programaPacientes .listaProgramaPacientes::-webkit-scrollbar {
        width: 5px;
    }
    
    .submenuHeader.contenSuscripciones .listaSuscripciones::-webkit-scrollbar-track,
    .submenuHeader.programaPacientes .listaProgramaPacientes::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 5px;
    }
    
    .submenuHeader.contenSuscripciones .listaSuscripciones::-webkit-scrollbar-thumb,
    .submenuHeader.programaPacientes .listaProgramaPacientes::-webkit-scrollbar-thumb {
        background: #25BED5;
        border: solid .2px #F5F5F5;
        border-radius: 100px;
    }
}
.bgRedFria{
    margin-top: 50px;
    background-image: url('../img/redFria/Fondoazul.png');
    padding: 100px 0px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.transicionRedFria{
    transition: all .3s ease-in-out;
}
.transicionRedFria:hover{
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: #0000006e 0px 8px 24px;
    padding: 15px;
    border-radius: 10px;
}

/*Redesing*/
.inputFocus:has(input:focus), input.inputFocus:focus {
    box-shadow: 0 0 0 .15rem rgb(37 190 213/var(--tw-text-opacity, 1));
}

/*registroCorreo first
registroPersonal second
registroMedico third
registroPassword fourth*/

.cntntSteps {
    justify-content: space-between
}
.cntntSteps div {
    width: 23%;
    border-radius: 6rem;
    height: 1rem;
}
.cntntRegistro:not(:has(.registroCorreo.hidden)) .cntntSteps div:first-child {
    background-color: #da6a52;
}

.cntntRegistro:not(:has(.registroCorreo.hidden)) .cntntSteps div:nth-of-type(2),
.cntntRegistro:not(:has(.registroCorreo.hidden)) .cntntSteps div:nth-of-type(3),
.cntntRegistro:not(:has(.registroCorreo.hidden)) .cntntSteps div:last-child {
    border: .2rem solid #1e9eb1;
}


.cntntRegistro:not(:has(.registroPersonal.hidden)) .cntntSteps div:first-child {
    background-color: #da6a52AA;
}

.cntntRegistro:not(:has(.registroPersonal.hidden)) .cntntSteps div:nth-of-type(2) {
    background-color: #da6a52;
}

.cntntRegistro:not(:has(.registroPersonal.hidden)) .cntntSteps div:nth-of-type(3),
.cntntRegistro:not(:has(.registroPersonal.hidden)) .cntntSteps div:last-child {
    border: .2rem solid #1e9eb1;
}


.cntntRegistro:not(:has(.registroMedico.hidden)) .cntntSteps div:first-child,
.cntntRegistro:not(:has(.registroMedico.hidden)) .cntntSteps div:nth-of-type(2) {
    background-color: #da6a52AA;
}

.cntntRegistro:not(:has(.registroMedico.hidden)) .cntntSteps div:nth-of-type(3) {
    background-color: #da6a52;
}

.cntntRegistro:not(:has(.registroMedico.hidden)) .cntntSteps div:last-child {
    border: .2rem solid #1e9eb1;
}

.cntntRegistro:not(:has(.registroPassword.hidden)) .cntntSteps div:first-child,
.cntntRegistro:not(:has(.registroPassword.hidden)) .cntntSteps div:nth-of-type(2),
.cntntRegistro:not(:has(.registroPassword.hidden)) .cntntSteps div:nth-of-type(3) {
    background-color: #da6a52AA;
}

.cntntRegistro:not(:has(.registroPassword.hidden)) .cntntSteps div:last-child {
    background-color: #da6a52;
}

.colorSec{
    color: #e9ecef
}

.validaRegistroPass:has(.textGreenEnable) li {
    list-style: 'X ';
    color: rgb(255 120 73 / var(--tw-text-opacity, 1));
}

.validaRegistroPass:has(.textGreenEnable) li.textGreenEnable {
    list-style: '\2713';
}

.gm-svpc, .gm-fullscreen-control {
    display: none;
}

/**/
.btnAddProd:hover {
    box-shadow: 0 0 4px 0 #25bed5, 0 0 3px 0 #ff7d01
}

.hovText:hover span, .hovText:hover{
    color: #25bed5BB
}
#search:focus, .tarjetaNuevoYoInpt:focus{
    box-shadow: 0 0 3px 0 #25bed5
}

.ajusteFotter {
    padding: 2.5rem 0 4rem;
}

.imgProf {
    width: 23rem;
    max-width: 100%;
    margin: 0 auto 0.5rem;
}

/*Btns banner carrousel*/
.carrouselBannerStl .swiper-button-prev:after {
    content: " " !important;
    border-radius: 50%;
    background-image: url('../img/izquierdaOpcional.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
    right: 0;
    position: absolute !important;
}

.carrouselBannerStl .swiper-button-next:after {
    content: " " !important;
    border-radius: 50%;
    background-image: url('../img/derechaOpcional.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
}

.carrouselBannerStl .controlesFlechas {
    height: 100%;
    width: 100% !important;
    margin: 0;
}
.carrouselBannerStl .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    border: .15rem solid #26bdd4BB
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ff7d00
}

.imgArrowFilter {
    width: 2rem;
    border-radius: 50%;
    border: .15rem solid #000000;
    cursor: pointer
}

.cntntSubFiltro{
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.cntntFiltroList:has(.categorias):not(:has(.categorias.hidden)) .imgArrowFilter, .cntntFiltroList:has(.marcasFiltro):not(:has(.marcasFiltro.hidden)) .imgArrowFilter {
    transform: rotate(180deg)
}

.botonAgregarProducto {
    right: 15%;
    bottom: -0.9rem;
}

/*animaOut*/
@keyframes animOut{
    0% {
        display: block;
        opacity: .8
    }
    25% {
        display: block;
        opacity: .6
    }
    50% {
        display: block;
        opacity: .4
    }
    75% {
        display: block;
        opacity: .2
    }
    100% {
        display: block;
        opacity: .0
    }
}

.animaPopOut{
    display: none;
    animation: animOut .3s;
}

#modalSuscripcionAlcontigo.animaPopOut #cntntCardPop {
    transition-duration: .4s;
    transform: translateY(15rem);
}