/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');*/
/*<UI KIT GUIDELINE>*/
/*INICIO ESTILOS GENERALES*/
:root {
    word-break: break-word;
    /*GUIDELINE*/
    --interfaz-Primario: #272727;
    --interfaz-Secundario: #636569;
    --interfaz-Terciario: #A6A6A8;
    --interfaz-Terciario-rgb: 166 166 168;
    --interfaz-Complementario1: #EAEAED;
    --interfaz-Complementario2: #F5F5F5;
    --marca-Primario: #A8123E;
    --marca-Secundario: #C19E74;
    --marca-Terciario: #A5987E;
    --marca-Complementario: #C2BA98;
    --hover-brightness: 65%;
    /*Sobreescriben light*/
    /*--bs-blue: #111ddd;*/
    /*--bs-success-rgb: 89,137,23;*/
    --bs-success-rgb: 225,230,220;
    --bs-warning-rgb: 252,185,44;
    /*--bs-danger-rgb: 190,0,0;*/
    --bs-danger-rgb: 239,191,191;
    --font: Roboto; /*Sí se quiere cambiar en font igual se debe actualizar el href de google fonts*/
    --bs-body-font-family: var(--font);
    --bs-body-font-size: 16px; /*caso body- Declaracion de tamaño rem*/
    --body-font-size: 0.875rem;
    --h1-font-size: 1.37rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.12rem;
    --h4-font-size: 1rem;
    --badge-font-size: 0.75rem;
    --label-font-size: 0.87rem;
    --form-control-font-size: 0.87rem;
    --alertas-font-size: 0.80rem;
    --bs-body-line-height: 21px;
    --h1-line-height: 33px;
    --h2-line-height: 30px;
    --h3-line-height: 27px;
    --h4-line-height: 24px;
    --label-line-height: 21px;
    --form-control-line-height: 21px;
    --alertas-line-height: 19px;
    --bold-weigth: 700;
    --medium-weight: 500;
    --normal-weight: 300;
    --primary-letter-spacing: 0.07rem;
    --secondary-letter-spacing: 0.03rem;
    --bs-body-color: var(--interfaz-Primario);
    --btn-saturation: saturate(1.5);
}



body .body {
    font-family: var(--font);
    font-size: var(--body-font-size);
    line-height: var(--bs-body-line-height);
    font-weight: var(--normal-weight);
    letter-spacing: var(--secondary-letter-spacing);
}



/*@media (min-width: 992px) {
.content {
padding-top: 3rem;
padding-right: 2rem;
padding-bottom: 1.5rem;
padding-left: 4rem;
}
}*/



.content {
    padding-top: 2rem;
    padding-right: 0.5rem;
    padding-bottom: 1.5rem;
    padding-left: 0.5rem;
}

@media (min-width: 576px) {
    .content {
        padding-top: 2rem;
        padding-right: 3rem;
        padding-bottom: 1.5rem;
        padding-left: 3rem;
    }
}



@media (min-width: 1921px) {
    .content {
        padding-top: 2rem;
        padding-right: 12rem;
        padding-bottom: 1.5rem;
        padding-left: 12rem;
    }
}



.row {
    --bs-gutter-x: 16px; /* padding de row, se dividen entre dos en row>*(light)*/
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(var(--bs-gutter-y)*-1);
}




@media (min-width: 576px) {
    .row {
        --bs-gutter-x: 32px; /*padding de row, se dividen entre dos en row>*(light)*/
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        margin-top: calc(var(--bs-gutter-y)*-1);
    }
}



/* .row > * {
flex-shrink: 0;
margin-top: var(--bs-gutter-y);
max-width: 100%;
padding-left: 0;
padding-right: calc(var(--bs-gutter-x));
width: 100%;
}*/



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #272727;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    margin-top: 0;
    letter-spacing: 0.03rem
}



.h1, h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--bold-weigth);
    text-transform: uppercase;
    letter-spacing: var(--primary-letter-spacing);
}



.h2, h2 {
    line-height: var(--h2-line-height);
    font-size: var(--h2-font-size);
    font-weight: var(--medium-weight);
    letter-spacing: var(--secondary-letter-spacing);
}



.h3, h3 {
    line-height: var(--h3-line-height);
    font-size: var(--h3-font-size);
    font-weight: var(--medium-weight);
    letter-spacing: var(--secondary-letter-spacing);
}



.h4, h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-weight: var(--bold-weigth);
    letter-spacing: var(--secondary-letter-spacing);
}



label {
    font-weight: var(--bold-weigth);
    font-size: var(--label-font-size);
    line-height: var(--label-line-height);
    letter-spacing: var(--secondary-letter-spacing);
}



.form-control {
    font-family: var(--font);
    line-height: var(--form-control-line-height);
    font-size: var(--form-control-font-size);
    font-weight: var(--normal-weight);
    letter-spacing: var(--secondary-letter-spacing);
}



    .form-control::placeholder {
        color: var(--interfaz-Secundario);
    }

.placeholderText {
    color: var(--interfaz-Secundario);
    font-family: var(--font);
    font-size: 0.87rem;
}



.alertas {
    font-family: var(--font);
    font-size: var(--alertas-font-size);
    line-height: var(--alertas-line-height);
    font-weight: var(--normal-weight)
}

span {
    font-family: var(--font);
    font-size: var(--form-control-font-size);
    line-height: var(--alertas-line-height);
    font-weight: var(--normal-weight)
}

.badge {
    color: #fff;
    font-size: var( --badge-font-size);
}

.btn {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 16px 1px !important;
    border-radius: 2px !important;
}



    .btn-check:focus + .btn, .btn:focus {
        box-shadow: 0 2px 10px 0.2rem rgb(var(--interfaz-Terciario-rgb) / 30%)!important;
    }



.btn-primary {
    background-color: var(--marca-Primario) !important;
    border-color: var(--marca-Primario) !important;
    color: var(--interfaz-Complementario1) !important;
}



    .btn-primary.disabled, .btn-primary:disabled {
        background-color: var(--marca-Primario) !important;
        border-color: var(--marca-Primario) !important;
        color: var(--interfaz-Complementario1) !important;
        opacity: 0.5 !important;
    }



    .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
        filter: var(--btn-saturation) !important;
        background-color: var(--marca-Primario) !important;
        border-color: var(--marca-Primario) !important;
        color: var(--interfaz-Complementario1) !important;
        /*        filter: brightness(var(--hover-brightness)) !important;*/
        box-shadow: 0 2px 10px 0.2rem rgb(var(--interfaz-Terciario-rgb) / 30%) !important;
    }



.btn-secondary {
    background-color: #FFFFFF !important;
    border: 2px solid var(--marca-Primario) !important;
    color: var(--marca-Primario) !important;
}



    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #FFFFFF;
        border: 2px solid var(--marca-Primario);
        color: var(--marca-Primario);
        opacity: 0.5;
    }



    .btn-check:focus + .btn-secondary, .btn-secondary:focus, .btn-secondary:hover {
        background-color: var(--marca-Primario);
        border-color: var(--marca-Primario);
        color: var(--interfaz-Complementario1);
        box-shadow: 0 2px 10px 0.2rem rgb(var(--interfaz-Terciario-rgb) / 30%);
    }



.btn-link {
    color: var(--marca-Primario);
    text-decoration: underline;
}



    .btn-link.disabled, .btn-link:disabled {
        color: var(--marca-Primario);
        opacity: 0.5;
    }



    .btn-link:hover {
        color: var(--marca-Primario);
        filter: brightness(var(--hover-brightness));
    }



.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity));
}



.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--interfaz-Primario),var(--bs-text-opacity));
}



.toast-body {
    word-wrap: break-word;
    margin-top: 23px;
    padding: 0px;
}



.dropdown-toggle:after {
    border: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
}
/*FIN ESTILOS GENERALES*/
/*</UI KIT GUIDELINE>*/
/*INICIO ESTILOS LAYOUT*/
.navbar {
    padding: 0.875rem;
    padding-left: 0rem;
    padding-right: 2rem;
    z-index: 9;
}

/*mover dialog general*/
@media (min-width: 991px) {
    body:not([data-sidebar-position=right]) .sidebar-toggle {
        margin-left: 1.5rem;
    }
}

.toastImg {
    margin: 20px 8px 20px 16px;
    height: 27px;
    width: 27px
}
/*FIN ESTILOS LAYOUT*/