@import url(./variables-formulit3.css);
@import url(./animations.css);
@import url(./main-locked.css);
@import url(./login.css);
@font-face {
    font-family: 'Roboto';
    src:
        url('./fonts/Roboto/static/Roboto-Regular.ttf') format('woff2'),
        url('./fonts/Roboto/static/Roboto-Bold.ttf') format('woff2'),
        url('./fonts/Roboto/static/Roboto-Black.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

.background-pauta{
    /* background: url(../img/fondo_compras.avif) no-repeat center center/cover; */
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.swal2-container {
    z-index: 8888 !important;
}

.icon-color-fl3{
    color: var(--login-right-hand-button-color);
}

.bg-menu-button{
    background-color: var(--login-background-color);
    color: white;
}

.bg-button-pos {
    background: #d10823;
}
.bg-button-pos-text-button-color{
    color: #d10823;
}

.bg-button-sstapp {
    background: #ff7333;
}
.bg-button-sstapp-text-button-color{
    color: #ff7333;
}

.bg-button-calidad {
    background: #053eb8;
}
.bg-button-calidad-text-button-color{
    color: #053eb8;
}

.bg-button-compras {
    background: #05885c;
}
.bg-button-compras-text-button-color{
    color: #05885c;
}

.text-fl3{
    color: var(--login-text-color);
}

.info-text-fl3{
    color: black;
}

.bg-fl3{
    background-color: var(--login-background-color);
}

.logo-header {
    width: clamp(100px , 10vw, 400px);
    max-height: 10vh;
    margin: 0 1rem;
}

.info-logo-header {
    width: clamp(100px, 10vw, 400px);
    max-height: 12vh;
    margin: 0 calc(.3rem + 1vw);
}

.sticky-header-pauta{
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(to bottom, white 50%, transparent);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.21rem;
}

.pharmi-show-anim-swal {
    animation: idle-farmi-anim 1s linear infinite alternate, pharmi-show-anim 1.25s ease-in-out;
    width: 102px !important;
    height: 102px !important;
    aspect-ratio: 1/1;
    position: absolute !important;
    top: -10% !important;
    transform: translate(-50%, -50%) !important;
    left: 0;
}

.formulit3-card-pautas{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.819);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 1rem .52rem;
    margin: 1rem calc(0.5rem + 3.5vw);
    box-shadow: inset 4px 4px 3px rgb(255, 255, 255),  inset -4px -4px 3px rgb(255, 255, 255), 2px 2px 3px rgb(255, 255, 255), -2px -2px 3px rgb(255, 255, 255);
    border: var(--login-border-color) 4px solid;
}

.btn-whatsapp{
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 40px;
    right: 40px;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
    z-index: 3;
}

.text-sub-size{
    font-size: 0.75rem;
}

.info-text-sub-size{
    font-size: calc(min(0.5rem, 1vw) + .3rem);
}

.text-title-size{
    /* font-size: 0.9rem; */
    font-weight: bold;
    color: var(--login-label-text-color);
}

.info-text-title-size{
    font-weight: bold;
    color: var(--login-text-color);
}

.background-pauta-img {
    filter: brightness(0.7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto es clave */
    z-index: -1;
}

.no-drag-img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.button-adquiere {
    background: linear-gradient(to right, var(--login-background-color) 30%, var(--login-right-hand-button-color));
    border: var(--login-border-color) 1px solid;
    box-shadow: #4444447a 4px 4px 2px;
    text-shadow: #1a33357a 2px 1px 1px, #1a33357a -2px -1px 1px;
    isolation: isolate;
}

.button-ingrese{
    background: linear-gradient(to right, #0fad37 30%, #08e45c);
    border: #01a8b8 1px solid;
    box-shadow: #4444447a 4px 4px 2px;
    text-shadow: #1a33357a 2px 1px 1px, #1a33357a -2px -1px 1px;
}

.text-responsive{
    font-size: calc(.51rem + 0.5vw);
    text-align: center;
    margin: 0.3rem;
    padding: 0.5rem;
}

.text-title-bold {
    font-weight: 900;
}

.label-color-login{
    color: var(--login-label-text-color);
}

.text-responsive-h4{
    font-size: calc(1.2rem + 1vw);
    text-align: center;
}

.label-responive{
    font-size: calc(0.6rem + .51vw);
    text-align: center;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--login-background-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--login-right-hand-button-color);
}

.drawer-left-fl3{
    display: none;
}

.menu-button {
    display: none;
}

hr.responsive-separator{
    display: flex !important;
}

.responsive-menu-button{
    display: none !important;
    justify-content: center !important;
}

.flex-header{
    display: none !important;
    place-content: center !important;
}

@media screen and (max-width: 600px) {
    .flex-header{
        display: flex !important;
    }
    .drawer-left-fl3{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 90vw;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.819);
        backdrop-filter: blur(5px);
    }

    .menu-button {
        display: flex;
    }
    hr.responsive-separator{
        display: none !important;
    }

    .responsive-menu-button{
        display: flex !important;
    }

    .logo-header{
        display: none;
    }

    .logo-header-small{
        display: none;
    }
}