.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 !important;
}

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

.justify-content-right {
    justify-content: right;
}

.componentes-derecha {
    display: flex;
    justify-content: right;
}

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

.linea-w9-h1 {
    background: rgb(195 195 195 / 50%);
}

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

.tds-border td,
.ths-border th {
    border: 1px solid var(--color-base-bajo-3);
}

.primer-columna-no-overflow td:first-of-type div {
    overflow: visible;
    max-width: initial;
}

.link-falso {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.link-falso:hover {
    color: darkblue;
}

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

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

.ultimo-td-visible td:last-of-type div {
    overflow: visible;
}

.td-activo {
    border-right: 2px solid #6fc8ff !important;
    border-left: 2px solid #6fc8ff !important;
    background: rgba(54, 198, 255, 0.1);
}

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

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

.max-height {
    height: 100vh;
}

.max-width {
    width: 100vw;
}

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

/*--------------------------------- 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;
    top: -3px;
    color: #ababab;
}

.form-floating textarea~label {
    left: 10px;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: 1;
    padding: 0 3px;
    transform: scale(.85) translateY(-.7rem) translateX(.15rem);
    height: fit-content;
    background-color: #fff;
    width: fit-content;
    color: #585858;
    border-radius: 5px;
}

.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; */
    background: transparent;
}

.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; */
    padding: 11px !important;
    height: 38px;
    min-height: 38px;
    background-color: transparent;
}

.form-floating textarea.form-control {
    height: 76px;
}

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

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

.form-floating .form-control[readonly]:not(.modal-search input[readonly]):focus,
.form-floating .form-select[readonly]:focus {
    border-color: var(--bs-border-color);
}

.form-floating>.form-control[readonly]:not(.modal-search input[readonly]):focus~label,
.form-floating>.form-control[readonly]:not(:placeholder-shown, .modal-search input[readonly])~label,
.form-floating>.form-select[readonly]~label {
    background-color: var(--bs-border-color);
}

.form-floating .equis-eliminar {
    position: absolute;
    font-size: 20px;
    right: 10px;
    bottom: calc(50% - 10px);
    color: #ff2525;
    cursor: pointer;
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.form-floating .equis-eliminar:hover {
    transform: rotate(90deg);
}

.btn {
    /* border: none; */
    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 i {
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.btn:hover i:not(.btn i.animacion-derecha) {
    transform: translate(-3px, 0px);
}

.btn:hover i.animacion-derecha {
    transform: translate(3px, 0px);
}

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

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

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

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% - 14px);
    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;
}

.contenedor-password {
    position: relative;
}

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

.editor-container p {
    margin: 0;
}

textarea {
    field-sizing: content;
}

/* document.querySelector('.ck-balloon-panel').remove(); */
/*--------------------------------- FORMULARIOS (FINAL) --------------------------------------------*/
/*--------------------------------- TEXTOS (INICIO) --------------------------------------------*/
h2 {
    color: #c5600d;
    font-size: 2rem;
}

/*--------------------------------- TEXTOS (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) --------------------------------------------*/