/*
    ESTILOS PERSONALIZADOS DE USO GENERAL
*/
:root {
    --primary: #4680ff;
    --success: #2CA87F;
    --back-gray: #e9eeed;
    --overlay-backdrop: 14px;
    --overlay-opacity: 0.4;
    --primary-rgb: 70, 128, 255;
    --white-rgb: 255, 255, 255;
    --disabled: #F3F5F7
}

.bg-ok {
    background-color: var(--success) !important;
}

.impar {
    background-color: white;
}

.par {
    background-color: var(--back-gray);
}

.big-font {
    font-size: 1em !important;
}

.big-font-2 {
    font-size: 1.1em !important;
}

.big-font-3 {
    font-size: 1.2em !important;
}

li a.dropdown-item:hover {
    cursor: pointer !important;
}

/* Dropdown para filtro de tabla */
.btn-check:checked + .btn, .introjs-tooltip .btn-check:checked + .introjs-button,
:not(.btn-check) + .btn:active, .introjs-tooltip:not(.btn-check) + .introjs-button:active,
.btn:first-child:active, .introjs-tooltip .introjs-button:first-child:active,
.btn.active, .introjs-tooltip .active.introjs-button, .btn.show,
.introjs-tooltip .show.introjs-button {
    border-color: var(--primary);
}

/* Agrega icono de ok y fail */
.icon-ok:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 0.2em;
    content: "\f00c";
    font-size: 1.2em;
}

.icon-fail:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 0.2em;
    content: "\f00d";
    font-size: 1.2em;
}

.icon-no-apply:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 0.2em;
    content: "\f068";
    font-size: 1.2em;
}

.icon-ok:hover,
.icon-fail:hover,
.icon-no-apply:hover {
    cursor: pointer;
}

/* Agrega icono a los textos de validación */
span.field-validation-error:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 0.3rem;
    content: "\f071";
}

span.field-validation-error {
    font-weight: 700;
    font-size: 0.85rem;
    font-style: italic;
    color: red;
}

/* Alineaciones de encabezados y celdas de las columnas del grid kendo */
table tbody tr td.align-center *,
table tbody tr td.align-center {
    justify-content: center !important;
    text-align: center !important;
}

table thead th.align-center *,
table thead th.align-center {
    justify-content: center !important;
    text-align: center !important;
}

table tbody tr td.align-left *,
table tbody tr td.align-left {
    justify-content: start !important;
    text-align: left !important;
}

table thead th.align-left *,
table thead th.align-left {
    justify-content: start !important;
    text-align: left !important;
}

table tbody tr td.align-right *,
table tbody tr td.align-right {
    justify-content: end !important;
    text-align: right !important;
}

table thead th.align-right *,
table thead th.align-right {
    justify-content: end !important;
    text-align: right !important;
}

/* Quita el scroll vertical del grid kendo */

.k-auto-scrollable {
    overflow-y: hidden !important;
}

.k-grid-header {
    padding: 0 !important;
}

/* posicion de los validadores del grid */
.k-validator-tooltip {
    position: relative !important;
    top: 0px;
}

/* icono de filtro grid */

.icon-filter {
    margin-right: 2em !important;
}

    .icon-filter:before {
        content: '';
    }


/* Adicciona el carácter * a los campos obligatorios */

label.required::after {
    content: ' * ';
}

/* Coloca en negrita fuerte la fuente */

.fw-700 {
    font-weight: 700 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-500 {
    font-weight: 600 !important;
}

.fw-light {
    font-weight: 500 !important;
}

/* Adiciona un checkbox al encabezado del acordeon */

.accordion--custom .accordion-header {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    padding-left: 1rem;
}

    .accordion--custom .accordion-header .accordion-button {
        padding-left: 0;
        background: none;
    }

.accordion--custom .accordion-button:not(.collapsed) {
    box-shadow: none;
}


/* Aumenta o disminuye el tamaño del checkbox */
input[type=checkbox].big {
    transform: scale(1.1);
    padding: 0 !important;
    margin: 0 !important;
}

input[type=checkbox].small {
    transform: scale(1.2);
    padding: 0 !important;
    margin: 0 !important;
}


/* Aumenta el tamaño del textarea para 4 filas */
textarea {
    height: 100px !important;
}

.auth-form {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/** Ajuste para  inputs en grid kendo */
.k-input input {
    height: 25px !important;
    padding: 0.3em;
}

.hide {
    display: none;
}

/** Ajuste para los textos (Notificaciones) */
.ajust-text {
    max-width: 330px;
    word-wrap: normal;
    flex-wrap: wrap;
    line-break: anywhere;
    padding: 0.5em;
    white-space: normal;
}

/** Ajuste de celdas en las tablas de detalle */

.container-empty {
    padding: 0;
    margin: 0;
    margin-bottom: 0.5rem;
}

    .container-empty table {
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

        .container-empty table.detail tbody tr td.td-detail {
            white-space: pre-line;
            word-wrap: anywhere;
            height: 100%;
            width: 70%;
            padding: 0;
            margin: 0;
            text-align: left;
        }

    .container-empty .array-image {
        display: flex;
        flex-wrap: wrap;
        place-content: center;
        place-items: center;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }

    .container-empty a {
        display: flex;
        place-content: center;
        place-items: center;
        padding: 0 !important;
        margin: 0 !important;
    }

    .container-empty .array-image img {
        display: flex;
        place-content: center;
        width: 150px;
        padding: 1em;
        margin: 0;
    }

/* Previsualización de Html en editores CkEditor */

.html-raw {
    pointer-events: none;
}

    .html-raw .cke_top.cke_reset_all,
    .html-raw .cke_bottom.cke_reset_all {
        display: none !important;
    }

/* Kendo Uploader */
img.image_preview,
.k-file-group-wrapper {
    width: auto;
    max-width: 96px;
    min-width: 96px;
    max-height: 96px;
}

.k-file-group-wrapper {
    width: 96px;
    display: flex !important;
    place-content: center !important;
    place-items: center !important;
    padding: 5px;
}

img.image_preview:hover {
    cursor: pointer;
}

img.image_preview.app {
    width: 64px;
    max-width: 64px;
    min-width: 64px;
}

.k-file-group.k-icon.k-i-files:before,
.k-file-group.k-icon.k-i-files:after {
    content: '';
}

.k-file-name-size-wrapper {
    margin: 0;
    padding: 0;
}

    .k-file-name-size-wrapper .k-file-name,
    .k-file-name-size-wrapper .k-file-size,
    .k-file-name-size-wrapper .k-file-extension {
        padding: 0.2em;
        padding-left: 0;
    }

.k-file-info {
    padding: 0;
    margin: 0;
}

    .k-file-info .k-file-extension {
        margin-left: 0;
        position: relative;
        color: black;
        font-size: 1.1em;
        float: left;
    }

    .k-file-info .k-file-size {
        position: relative;
        color: darkgrey;
        font-size: 0.85em;
        padding-left: 6em;
        float: right;
    }

.k-file-status {
    padding: 1em !important;
}

.k-dropzone-active {
    pointer-events: none;
}

.k-action-buttons {
    display: flex;
    place-content: end;
}

.label-selectedFiles,
.label-totalFiles {
    font-weight: 500;
    padding: 1em;
    position: absolute;
    left: 0;
}

.k-button.btn-toolbar {
    position: absolute;
    color: white;
    right: 0;
    margin: 1em 0.3em 0.3em 1em;
    min-width: 100px;
    width: auto;
}

.k-toolbar.k-widget {
    min-height: 60px;
}

/* Fechas y horas DateTimePicker, DatePicker y TimePicker */

input.datePicker,
input.dateTimePicker,
input.timePicker {
    pointer-events: none;
}

/* Listas de selección multiple kendoMultiSelect */

.form-floating .k-multiselect {
    border-radius: 8px;
    height: auto;
}

.k-multiselect.k-disabled .k-clear-value {
    pointer-events: none;
}

.k-multiselect .k-chip {
    background-color: white;
    border-radius: 8px;
    padding: 0.5em;
}

    .k-multiselect .k-chip .k-chip-remove-action .k-icon {
        color: var(--primary);
    }


.modal-close {
    position: absolute;
    border: 1px solid var(--primary);
    border-radius: 50%;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 1em 0 0;
    font-weight: 600;
    background-color: white;
    color: var(--primary);
}

    .modal-close::after {
        content: 'X';
    }

    .modal-close:hover {
        cursor: pointer;
        background-color: var(--primary);
        color: white;
    }

.k-widget.k-tooltip.k-state-border-up {
    background-color: white;
    color: var(--primary) !important;
    border: 1px solid var(--primary);
    font-weight: 600;
    text-align: center;
}

.modal-title {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.3em;
}

.filter {
    font-size: 1.1rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    border-radius: 0;
    margin-bottom: 0.5rem;
}

.k-icon.k-i-check-outline,
.k-icon.k-i-cancel-outline {
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
    font-size: 20px;
}

.badge-section {
    margin: 0;
    border-radius: 50%;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

.badge-filter {
    position: absolute;
    border-radius: 6px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    font-size: 0.9rem;
    right: 0;
    margin-right: 0.6rem;
}

.cke_dialog_ui_input_text {
    pointer-events: all !important;
}

.required-fields {
    padding: 0;
    margin: 0;
    margin-top: 0.2rem;
    color: darkorange;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 400;
}

.bg-title {
    border: 1px solid lightgray;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 1rem;
    margin-bottom: 1rem;
    backdrop-filter: contrast(97%);
}

.link {
    padding: 0 0 0.2rem 0;
    margin: 0;
    color: darkblue;
    font-size: 0.8rem;
    font-style: italic;
}

/* Loader cargador de pagina */

.loader-bg {
    display: none !important;
}

.modal_loader {
    display: flex;
    place-items: center;
    place-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--white-rgb), var(--overlay-opacity));
    -webkit-backdrop-filter: blur(var(--overlay-backdrop)) !important;
    backdrop-filter: blur(var(--overlay-backdrop)) !important;
    z-index: 100000;
    border: 2px solid var(--primary);
    transition: all 1s ease-out;
    opacity: 1;
}

.loaded {
    opacity: 0;
    z-index: -100000;
}

.modal_loader .content-image {
    display: flex;
    place-items: center;
    place-content: center;
}

.loader-bar {
    display: table-cell;
    background: var(--primary) !important;
    animation: loader 1s both infinite;
    color: white;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    place-content: center;
    place-items: center;
    border: 2px solid var(--primary);
    padding: 0.1rem;
    margin: 0;
    height: 80px;
}

.loader-image {
    place-content: center;
    width: 25%;
    height: 25%;
}

.line1 {
    animation-delay: 0.1s;
}

.line2 {
    animation-delay: 0.2s;
}

.line3 {
    animation-delay: 0.3s;
}

.line4 {
    animation-delay: 0.4s;
}

.line5 {
    animation-delay: 0.5s;
}

.line6 {
    animation-delay: 0.6s;
}

.line7 {
    animation-delay: 0.7s;
}

.line8 {
    animation-delay: 0.8s;
}

.line9 {
    animation-delay: 0.9s;
}

.line10 {
    animation-delay: 1s;
}

.line11 {
    animation-delay: 1.1s;
}

.line12 {
    animation-delay: 1.2s;
}

.line13 {
    animation-delay: 1.3s;
}

.line14 {
    animation-delay: 1.4s;
}

.line15 {
    animation-delay: 1.5s;
}

@keyframes loader {
    0% {
        transform: scaleY(0.1);
        filter: opacity(0.1);
    }

    25% {
        transform: scaleY(0.5);
        filter: opacity(0.3);
    }

    50% {
        transform: scaleY(1);
        filter: opacity(0.5);
    }

    75% {
        transform: scaleY(0.5);
        filter: opacity(0.7);
    }

    100% {
        transform: scaleY(0.1);
        filter: opacity(1);
    }
}

[readonly], .readonly, .dropDownList.readonly {
    background-color: var(--disabled) !important;
}

    [readonly] > *, .readonly > *, .dropDownList.readonly > * {
        pointer-events: none !important;
    }

    [readonly]:hover, .readonly:hover, .dropDownList.readonly:hover {
        cursor: not-allowed !important;
    }

td .table_buttons a, td .table_buttons button.btn_icon {
    max-height: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    width: 18px !important;
    padding: 0.5em !important;
    margin: 0 !important;
    border-radius: 50% !important;
}

.k-list-item.k-selected {
    color: white !important;
}

.td-table-top {
    background-color: white;
    padding: 0.7rem;
    border: 1px solid #EBEBEB;
    border-top: 1px solid lightgray;
}

.td-table-bottom {
    background-color: white;
    padding: 0.7rem;
    border: 1px solid #EBEBEB;
    border-bottom: 1px solid lightgray;
}

.btn-search {
    height: 100% !important;
    border-radius: 8px;
}

button[data-default-action="defaultExport"] i.icon,
.k-grid-excel i.icon,
.k-grid-pdf i.icon {
    padding: 0 0.3rem 0 0;
}



/* Ojo para ver la contrasena (js/helpers/verClave.js) */
input.con-ver-clave {
    padding-right: 2.75rem !important;
}

.btn-ver-clave {
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
}

    .btn-ver-clave:hover,
    .btn-ver-clave:focus-visible {
        color: var(--bs-primary, #4680ff);
    }

    .btn-ver-clave i {
        font-size: 1.15rem;
        line-height: 1;
    }

.btn-ver-clave-flotante {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

/* El navegador (Edge) trae su propio ojo: se deja solo el nuestro */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}