.background-1 {
    background-color: var(--color-grafico-1);
}

.background-2 {
    background-color: var(--color-grafico-2);
}

.background-3 {
    background-color: var(--color-grafico-3);
}

.background-4 {
    background-color: var(--color-grafico-4);
}

.background-5 {
    background-color: var(--color-grafico-5);
}

.background-6 {
    background-color: var(--color-grafico-6);
}

.background-7 {
    background-color: var(--color-grafico-7);
}

.background-8 {
    background-color: var(--color-grafico-8);
}

.background-9 {
    background-color: var(--color-grafico-9);
}

.background-10 {
    background-color: var(--color-grafico-10);
}

.background-11 {
    background-color: var(--color-grafico-11);
}

.background-12 {
    background-color: var(--color-grafico-12);
}

.error-vacio {
    color: #ff2525;
    border: 1px solid #ff2525;
}

.cursor-pointer {
    cursor: pointer;
}

.orden-fila {
    display: flex;
    flex-direction: row;
}

.orden-columna {
    display: flex;
    flex-direction: column;
}

.centrado-vertical {
    display: flex;
    align-items: center;
}

.centrado-horizontal {
    display: flex;
    justify-content: center;
}

.super-centrado {
    display: flex;
    justify-content: center;
    align-items: center;
}

.transiciones {
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.linea-w9-h1 {
    background: var(--color-linea-separador);
}

.linea-w9-h1-oscuro {
    background: var(--color-linea-separador-oscuro);
}

.linea-w9-h1,
.linea-w9-h1-oscuro {
    margin: auto;
    height: 1px;
    width: 90%;
}

.oculto {
    display: none !important;
}

.texto-rojo {
    color: #ff2525;
}

.texto-verde {
    color: #33b133;
}

.texto-naranja {
    color: #ff7f57;
}

.texto-azul {
    color: #1d46e1;
}

.z-index-maximo {
    z-index: 10000;
}

.max-height {
    height: 100vh;
}

.max-width {
    width: 100vw;
}


.texto-tachado {
    text-decoration: line-through;
}

.no-scroll{
    overflow: visible !important;
}

.scroll-y {
    overflow-y: auto;
}

/*--------------------------------- FORMULARIOS (INICIO) --------------------------------------------*/
.form-floating label {
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 0;
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    z-index: 10 !important;
    background: transparent !important;
}

.form-floating .form-control,
.form-floating .form-select {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #c8c8c8;
    border-radius: 0;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    border-bottom: 3px solid var(--color-base-medio-1);
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.btn-primary {
    background: var(--color-base-fuerte-1);
    border: none;
    border: 1px solid var(--color-base-fuerte-1);
    font-weight: bold;
}


.btn-primary:hover,
.btn-outline-primary:hover {
    background: var(--color-base-medio-5);
    border: 1px solid var(--color-base-medio-5);
}

.btn-primary:focus,
.btn-outline-primary:focus {
    background: var(--color-base-medio-5);
    color: var(--color-base-bajo-1);
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible {
    background: var(--color-base-medio-5);
    color: var(--color-base-bajo-1);
}

.btn-primary:active,
.btn-outline-primary:active {
    background: var(--color-base-medio-5) !important;
    color: var(--color-base-bajo-1) !important;
    outline: none !important;
    outline-width: 0 !important;
    border: none !important;
}

.btn-success:hover i,
.btn-primary i,
.btn-outline-primary i,
.btn-outline-danger i,
.btn-outline-success i {
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.btn-success:hover i,
.btn-primary:hover i,
.btn-outline-primary:hover i,
.btn-outline-danger:hover i,
.btn-outline-success:hover i {
    transform: translate(-3px, 0px);
}

.btn-outline-primary {
    /* background: transparent; */
    border: 1px solid var(--color-base-fuerte-1);
    color: var(--color-base-fuerte-1);
    font-weight: bold;
}

/* btn claro */
.btn-primary.claro {
    background: var(--color-base-medio-5);
    border: none;
    border: 1px solid var(--color-base-medio-5);
    font-weight: bold;
}

.btn-primary.claro:hover {
    background: var(--color-base-medio-4);
    border: 1px solid var(--color-base-medio-4);
}

.text-right {
    text-align: right;
}

textarea:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.modal-search,
.input-con-icono {
    position: relative;
}

.modal-search input {
    cursor: pointer;
}

.input-con-icono>i {
    color: var(--color-base-fuerte-1);
}

.modal-search>i,
.input-con-icono>i {
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
}

.input-con-icono.input-password>i {
    padding: 8px;
    top: calc(50% - 9px);
    cursor: pointer;
}

.input-con-icono.input-password>i:hover {
    color: var(--color-base-medio-3);
}

.input-con-icono.input-password>i~i {
    display: none;
}

.input-con-icono.input-password.active>i {
    display: none;
}

.input-con-icono.input-password.active>i~i {
    display: block;
}

label.input-error {
    color: #ff2525 !important;
}

.input-error:not(label) {
    border-bottom: 3px solid #ff2525 !important;
    color: #ff2525 !important;
}

input[readonly]:not(.modal-search input[readonly]),
textarea[readonly] {
    background: var(--color-base-bajo-4) !important;
}

.contenedor-password {
    position: relative;
}

.contenedor-password .fa-eye,
.contenedor-password .fa-eye-slash {
    height: 22px;
    width: 22px;
    color: var(--color-base-medio-6);
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 11px);
    right: 10px;
    cursor: pointer;
}

.input-sin-estilos{
    background-color: transparent;
    border: none;
    outline: none;
}

/*--------------------------------- FORMULARIOS (FINAL) --------------------------------------------*/


/*--------------------------------- TEXTOS (INICIO) --------------------------------------------*/
h2 {
    color: var(--color-base-fuerte-1);
    font-size: 2rem;
}

/*--------------------------------- TEXTOS (FINAL) --------------------------------------------*/


/*--------------------------------- MARGEN (INICIO) --------------------------------------------*/
.mr-1 {
    margin-right: 10px;
}

.mr-2 {
    margin-right: 20px;
}

.ml-1 {
    margin-left: 10px;
}

.ml-2 {
    margin-left: 20px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

/*--------------------------------- MARGEN (FINAL) --------------------------------------------*/

/*--------------------------------- ANCHO (INICIO) --------------------------------------------*/
.wd-1 {
    width: 10%;
}

.wd-2 {
    width: 20%;
}

.wd-3 {
    width: 30%;
}

.wd-4 {
    width: 40%;
}

.wd-5 {
    width: 50%;
}

.wd-6 {
    width: 60%;
}

.wd-7 {
    width: 70%;
}

.wd-8 {
    width: 80%;
}

.wd-9 {
    width: 90%;
}

.wd-10 {
    width: 100%;
}

/*--------------------------------- ANCHO (FINAL) --------------------------------------------*/