@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;
}

/*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;
}


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

/* Rounded */
.rounded-zl {
    border-radius: 12px !important;
}

.rounded-lg {
    border-radius: 16px !important;
}

.rounded-xl {
    border-radius: 20px !important;
}

.rounded-50 {
    border-radius: 50% !important;
}

.rounded-none {
    border-radius: 0px !important;
}

/* Border */
.border-card-1 {
    border-color: rgb(var(--v-theme-azul-100)) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.border-1 {
    border-style: solid !important;
    border-width: 1px !important;
}

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

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

.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-info-10 {
    border-color: rgb(var(--v-theme-info-10)) !important;
}

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

.border-1-azul-500 {
    border-color: rgb(var(--v-theme-azul-500)) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.border-1-azul-50 {
    border-color: rgb(var(--v-theme-azul-50)) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.border-1-white {
    border-color: white !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.border-1-field-texto-100 > .v-input__control > .v-field {
    border-color: rgb(var(--v-theme-texto-100)) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.border-none {
    border-style: none !important;
}

.border-field-1 > .v-input__control > .v-field {
    border-style: solid !important;
    border-width: 1px !important;
}

.border-color-field-azul-50 > .v-input__control > .v-field {
    border-color: rgb(var(--v-theme-azul-50)) !important;
}

.border-color-field-texto-100 > .v-input__control > .v-field {
    border-color: rgb(var(--v-theme-texto-100)) !important;
}

/*Fields*/
.bg-field-azul-50 > .v-input__control > .v-field {
    background-color: rgb(var(--v-theme-azul-50));
}

.bg-field-white > .v-input__control > .v-field {
    background-color: white;
}

.bg-field-transparent > .v-input__control > .v-field {
    background-color: transparent;
}

.bg-field-white > .v-input__control > .v-field {
    background-color: white;
}

.border-field-text-100 > .v-input__control > .v-field {
    border-color: rgb(var(--v-theme-texto-100)) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

/* === Body === */


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

/* === Pequeño (14px) === */

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-02 {
    gap: 0.2em !important;
}

.gap-05 {
    gap: 0.5em !important;
}

.gap-1 {
    gap: 1em !important;
}

.gap-1-5 {
    gap: 1.5em !important;
}

.gap-2 {
    gap: 2em;
}

.lh-1 {
    line-height: 1;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.ellipsis-1 {
    flex: 1 1 auto;
    min-width: 0; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; 
    line-height: 1.5; 
    max-height: calc(1.5em * 2);
}

.ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.5; 
    max-height: calc(1.5em * 3);
}


.v-col-4-n05 {
    flex: 0 0 calc((100% - (2 * 0.5em)) / 3);
    max-width: calc((100% - (2 * 0.5em)) / 3) !important;
    min-width: calc((100% - (2 * 0.5em)) / 3) !important;
}

.grow-none {
    flex-grow: 0 !important;
}

.d-rows {
    flex-direction: column !important;
    display: flex !important;
}

.v-num {
    list-style: decimal !important; /* Vuetify a veces lo pone en none */
    padding-left: 1.5rem !important; /* espacio para los números */
    margin: 0; /* opcional */
}

    .v-num > li {
        display: list-item !important; /* por si alguna clase lo pone en flex/block */
    }

.v-bullet {
    list-style: disc !important; /* • de toda la vida */
    padding-left: 1.5rem !important;
    margin: 0;
}

    .v-bullet > li {
        display: list-item !important;
    }

/*este aside datalist center los combos */
.v-field__field .v-field__input input::placeholder {
    color: rgb(var(--v-theme-texto-600)) !important;
    opacity: 1; /* por si el navegador baja la opacidad */
}