@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html, body, #smoApp {
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: 'Noto Sans', sans-serif !important;
    font-optical-sizing: auto !important;
    font-style: normal !important;
    font-variation-settings: "wdth" 100 !important;
    overflow: hidden;
}

/*Estilos de Scroll*/

@media (min-width: 601px) {
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3); /* color del scroll */
        border-radius: 2px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.5); /* cambia color al hover */
        }
}

::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
}

.cards-responsive-4 {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat( auto-fill,minmax(min(270px, 100%), 1fr) );
}

.cards-responsive-3 {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat( auto-fill,minmax(min(370px, 100%), 1fr) );
}

/* Le damos al botón posición relativa */
.position-relative {
    position: relative !important;
}

/* Este div se posiciona absoluto y cubre todo el btn */
.fill-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.field-bg-secondary > .v-input__control > .v-field {
    background-color: rgb(var(--v-theme-secondary));
}

/*estilos snackbar*/
.border-advertencia-50 {
    border-color: rgb(var(--v-theme-advertencia-50)) !important;
}

.border-error-50 {
    border-color: rgb(var(--v-theme-error-50)) !important;
}

.border-info-50 {
    border-color: rgb(var(--v-theme-info-50)) !important;
}

.border-exito-50 {
    border-color: rgb(var(--v-theme-exito-50)) !important;
}

/* doctor online font class */

/* === Display === */
.display-400 {
    font-weight: 400 !important;
    font-size: 70px !important;
}

.display-600 {
    font-weight: 600 !important;
    font-size: 70px !important;
}

/* === H1 === */
.h1-400 {
    font-weight: 400 !important;
    font-size: 48px !important;
}

.h1-600 {
    font-weight: 600 !important;
    font-size: 48px !important;
}

/* === H2 === */
.h2-400 {
    font-weight: 400 !important;
    font-size: 36px !important;
}

.h2-600 {
    font-weight: 600 !important;
    font-size: 36px !important;
}

/* === H3 === */
.h3-400 {
    font-weight: 600 !important;
    font-size: 32px !important;
}

.h3-600 {
    font-weight: 600 !important;
    font-size: 32px !important;
}

/* === H4 === */
.h4-400 {
    font-weight: 400 !important;
    font-size: 24px !important;
}

.h4-600 {
    font-weight: 600 !important;
    font-size: 24px !important;
}

/* === Body === */
.p-400 {
    font-weight: 400 !important;
    font-size: 16px !important;
}

.p-500 {
    font-weight: 500 !important;
    font-size: 16px !important;
}

.p-600 {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.p-700 {
    font-weight: 700 !important;
    font-size: 16px !important;
}

.p-500-underline {
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: underline !important;
}

/* === Pequeño (14px) === */
.p-small-regular {
    font-weight: 500 !important;
    font-size: 14px !important;
}

.p-small-semibold {
    font-weight: 600 !important;
    font-size: 14px !important;
}

.p-small-400 {
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* === Display (53px, solo uso excepcional) === */
.display-mobile-400 {
    font-weight: 400 !important;
    font-size: 53px !important;
}

.display-mobile-600 {
    font-weight: 600 !important;
    font-size: 53px !important;
}

/* === H1 (32px) === */
.h1-mobile-400 {
    font-weight: 400 !important;
    font-size: 32px !important;
}

.h1-mobile-600 {
    font-weight: 600 !important;
    font-size: 32px !important;
}

/* === H2 (36px) === */
.h2-mobile-400 {
    font-weight: 400 !important;
    font-size: 36px !important;
}

.h2-mobile-600 {
    font-weight: 600 !important;
    font-size: 36px !important;
}

/* === H3 (21px) === */
.h3-mobile-400 {
    font-weight: 400 !important;
    font-size: 21px !important;
}

.h3-mobile-600 {
    font-weight: 600 !important;
    font-size: 21px !important;
}

/* === H4 (19px) === */
.h4-mobile-400 {
    font-weight: 400 !important;
    font-size: 19px !important;
}

.h4-mobile-600 {
    font-weight: 600 !important;
    font-size: 19px !important;
}

/*custom scrollbar dronline*/