/*

    Atencion: importante!

    Cada vez que se modifique este archivo, se debe modificar el archivo index.html

    La linea 

    <link href="css/app.css?version=1" rel="stylesheet" />

    incrementando el nro de version, a por ejemplo:

    <link href="css/app.css?version=2" rel="stylesheet" />

    Lo importante es que el nro cambie, con el fin de que al ser recargada la
    página por el usuario, los cambios impacten sin necesidad de hacer una recarga
    manual (ej CTRL+F5)

    Eso sucede porque los archivos CSS son almacenados en el cache por el explorador
    de manera automatica.

 */



/* Scrollbars */

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--jx4-scrollbar-color) var(--jx4-scrollbar-color-back);
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 8px; /* Tamaño del scroll en vertical */
        height: 8px; /* Tamaño del scroll en horizontal */
        display: auto; /* Ocultar scroll */
    }

    *::-webkit-scrollbar-track {
        background: var(--jx4-scrollbar-color-back);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--jx4-scrollbar-color);
        border-radius: 4px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--jx4-scrollbar-color-hover);
        }

        *::-webkit-scrollbar-thumb:active {
            background-color: var(--jx4-scrollbar-color-active);
        }


/* Skeletons */

.jx4-skeleton {
    background-color: var(--jx4-skeleton-color) !important;
}

/* bordes redondeados */

.e-input-group .e-input[readonly], .e-input[readonly] {
    border-radius: 6px !important;
    background-color: var(--jx4-form-input-disable-color) !important;
}

.e-input-group {
    border-radius: 6px !important;
}

.e-input-group-icon {
    border-radius: 6px !important;
}

.e-btn {
    border-radius: 6px !important;
}

.e-panel {
    border-radius: 6px !important;
}

.e-panel-header {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important
}

.e-card {
    border-radius: 6px !important;
    background-color: var(--jx4-card-color) !important;
}

/* colores de texto de botones primary */
.e-btn.e-primary * {
    color: var(--jx4-button-text-color) !important;
}

.e-btn.e-primary:disabled * {
    color: var(--jx4-button-text-color-disabled) !important;
}

.e-btn.e-primary {
    color: var(--jx4-button-text-color) !important;
}

    .e-btn.e-primary:disabled {
        color: var(--jx4-button-text-color-disabled) !important;
    }

    /* botones de toast */
    .e-btn.e-primary.e-flat.e-small.e-btn-toast {
        color: var(--bs-primary) !important;
    }

        .e-btn.e-primary.e-flat.e-small.e-btn-toast:hover {
            color: var(--jx4-button-text-color) !important;
        }

        .e-btn.e-primary.e-flat.e-small.e-btn-toast:focus {
            color: var(--jx4-button-text-color) !important;
        }


.e-btn-content {
    font-size: 14px !important;
}

/* clases para campos, etiquetas, etc de formularios */

.form-text {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--jx4-toolbar-text-color) !important;
}

.form-label {
    min-width: 200px;
    max-width: 300px;
    display: flex;
    justify-content: right;
    text-align: right;
}

.form-label-edit {
    margin-top: 4px !important;
}

.form-label-add {
    margin-top: 6px !important;
}

.required::after {
    content: " *" !important;
    font-weight: bold !important;
    color: var(--bs-red) !important;
}

.form-field {
    min-width: 100px; /* antes 200 px, ver como funciona en el dinamico *** */
    max-width: 400px;
}

.field-ref {
    font-size: 11px;
    color: var(--jx4-field-ref-color) !important;
}

.field-info {
    font-size: 11px;
    color: var(--jx4-field-info-color) !important;
}

.field-danger {
    font-size: 11px;
    color: var(--jx4-field-danger-color) !important;
}

.form-label-edit, .form-label-add {
    min-width: 120px;
    max-width: 200px;
    display: flex;
    justify-content: right;
    text-align: right;
}

.form-row-subtitle {
    margin-top: 3px !important;
}

/* correccion color del texto de los campos tipo seleccion multiple */
.e-multiselect {
    color: var(--jx4-toolbar-text-color) !important;
}

/* colores de botones de toolbar */
/* acomoda iconos center toolbars */
.bi-toolbar {
    color: var(--jx4-toolbar-icon-color) !important;
}

.e-toolbar {
    box-shadow: none !important;
    background: none !important;
}

    .e-toolbar .e-toolbar-items {
        border: 0px !important;
        box-shadow: none !important;
        background-color: var(--bs-body-bg) !important;
    }

.bi-tool-alone {
    padding: 3px 0px 0px 0px;
}

.bi-tool {
    padding: 3px 0px 0px 6px;
}

.bi-spinner {
    margin: 0px 20px 0px 5px !important;
}

.e-tbar-btn-text {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.e-tbar-altarapida {
    padding-left: 7px !important;
    padding-right: 50px !important;
}

.e-switch-handle {
    background-color: var(--jx4-switch-color) !important;
}

.e-switch-inner {
    border-color: var(--jx4-toolbar-icon-color) !important;
}

.col-toolbar-form {
    padding-bottom: 8px;
}

/* espaciado de separadores de toolbar */
.e-toolbar-item.e-separator {
    padding-left: 7px !important;
    margin-right: 8px !important;
}

/*correccion para boton sfDropdownButton de toolbar*/
.btnDwn {
    font-size: 14px !important;
    padding-left: 5px;
    padding-right: 5px;
}

/* boton de opciones de barra lateral de modulos y dashboards */

.btn-collapse {
    border-radius: 4px !important;
}

    .btn-collapse.active {
        background-color: var(--jx4-icon-hover) !important;
    }

.col-btn-collapse {
    margin-top: 7px !important;
    max-width: 40px !important;
    font-size: 1.3rem !important;
}

    .col-btn-collapse :hover {
        cursor: pointer !important;
        background-color: var(--jx4-icon-hover) !important;
    }

/* esto no permite que se rompa el scroll cuando hay muchas vistas */
.content-area {
    overflow-x: hidden !important;
}

.content-area-2 {
    height: 100% !important;
    width: 100% !important;
}



.mywork-content {
    min-height: 100vh !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* dash panels listview */

.list-line {
    display: flex;
    flex-direction: row;
}

.list-icon {
    margin: 0px 8px 2px 0px;
    color: var(--bs-primary) !important;
}

.dash-listview-container {
    height: 100% !important;
}

.icon-dash-working {
    padding: 30px 0px 0px 55px;
    font-size: 120px;
    color: var(--jx4-skeleton-color);
}


/* correcciones y colores de fondo de dialogs  */

.dialog-max-height {
    max-height: 100% !important;
}

.e-dialog .e-dlg-header-content {
    padding: 10px 24px 5px !important;
    border-radius: 6px;
}

.e-dlg-header {
    background-color: var(--bs-body-bg) !important;
}

.e-dlg-header-content {
    background-color: var(--bs-body-bg) !important;
}

.e-dialog .e-dlg-content {
    background-color: var(--bs-body-bg) !important;
    margin-bottom: 0px !important;    
}

.e-dialog .e-footer-content {
    background-color: var(--bs-body-bg) !important;
}

/* este width al 95% rompe los dialogos simples, poniendo el titulo una lineas mas abajo, corregido con el display inline */
.e-dialog .e-dlg-header {
    width: 95% !important;
    display: inline !important; /* esto corrige que los titulos en modales simples se muestren en una segunda linea por el 95% */
}

.e-dialog .e-dlg-content {
}
/* no muestra los tab headers si el sftab id = "tab-no" */
#tab-no > .e-tab-header {
    display: none !important;
}

/* el ultimo tab header tiene un margen superior diferente... #4347 */
.e-tab .e-tab-header .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
    margin: 0 !important;
}

.row-sticky-dlg {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 55px !important;
    background-color: var(--bs-body-bg) !important;
}

.row-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 45px !important;
    background-color: var(--bs-body-bg) !important;
}

.header-sticky-1 {
    position: sticky !important;
    top: 10px !important;
    z-index: 1000 !important;
    background-color: var(--jx4-bg-color) !important;
}

.header-sticky-2 {
    position: sticky !important;
    top: 52px !important;
    z-index: 1000 !important;
    background-color: var(--jx4-bg-color) !important;
}

.header-sidebar {
    position: sticky !important;
    top: 0px;
    z-index: 1000 !important;
    background-color: var(--jx4-bg-color) !important;
}

/* list items */

.menu-lista {
    /*margin-top: 10px;*/
    /*margin-bottom: 15px;*/
    top: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 8px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    white-space: nowrap;
}

.e-list-item {
    color: var(--jx4-nav-items-color) !important;
    padding-left: 14px !important;
    white-space: normal !important;
    height: auto !important;
}

.e-list-group-item {
    text-indent: 0px !important;
}

.e-list-item-nav {
    text-indent: -14px !important;
}

.e-list-item.e-hover {
    background-color: var(--jx4-listitem-bg-color) !important;
}

/*  los sobreescribe para uso en header de forms, que requieren !important */
.badge {
    font-weight: 300;
    font-size: 10px;
    border-radius: 5px !important;
    text-indent: 0px;
    margin-right: 10px !important;
}

.badge-primary {
    background-color: var(--bs-primary) !important;
    color: var(--jx4-button-text-color) !important;
}

.badge-secondary {
    background-color: var(--bs-secondary) !important;
    color: var(--jx4-button-text-color) !important;
}

.badge-info {
    background-color: var(--bs-info) !important;
    color: var(--jx4-button-text-color) !important;
}

.badge-subtitle {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* calendarios / tabtareas */

.inline-details {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.e-quikInfoText {
    font-size: 13px !important;
    padding: 0px 5px !important;    
}

.contet-quick-info {
    margin-top: 18px;
}

.header-quick-info {
    padding: 0px 5px 5px 5px;
    border-radius: 2px;
    margin: 30px 15px 0px 0px;
}

.e-infoTitle {
    font-size: 14px;
    margin-right: 10px;
}

.quickinfo-title {
    margin: 14px;
    font-size: 18px !important;
    color:white !important;
}

.e-agenda-item .e-appointment {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.close-quickInfo {
    display: flex;
    justify-content: flex-end;
    margin: 5px 12px 0px 0px;
}

.agendaIcon {
    margin-left: 10px !important;
}

.e-dlg-header .agendaAvatar .arrow-icon {
    color: white !important;
}

.e-agendaText, .agendaIcon {
    color: grey;
}

.e-agendaText {
    margin-left: 5px !important;
}

.info-line {
    padding: 5px;
    overflow: hidden !important;
}

.e-quick-popup-wrapper {
    max-width: 500px !important;
}

/* Toolbar de ImageEditor // ojo con esto que puede romper otras toolbars... *** */
/* TODO: levantar ticket en syncfusion  */
/* corrige bug de toolbar que no esconde boton de apertura de imagenes */
#load {
    display: none !important;
}

/* corrige bug de toolbar que no esconde boton redo */
#redo {
    display: none !important;
}

/* corrige bug de toolbar que no esconde boton undo */
#undo {
    display: none !important;
}

/* icono de info de modulos */

.info-icon {
    display: flex;
    margin-top: 0px;
    margin-left: 8px;
    width: 30px;
    height: 30px;
    position: fixed;
    float: left;
    font-size: 15px;
    color: var(--jx4-info-icon-color) !important;
}

.info-icon-mod {
    display: flex;
    margin-top: 0px;
    margin-left: 0px;
    width: 30px;
    height: 30px;
    position: fixed;
    float: inline-end;
    font-size: 15px;
    color: var(--jx4-info-icon-color) !important;
}

.info-icon-dlg {
    font-size: 15px;
    color: var(--jx4-info-icon-color) !important;
}


/* alinea iconos de menues desplegables */
.bi-icon-context {
    margin-top: -4px !important;
}

#login-form {
    border-radius: 3px;
}

/*Logo Svg*/
.e-svg-maite {
    background-image: url('../images/logos/simbolo-maite.svg');
    height: 16px;
    width: 16px;
    filter: var(--jx4-logo-svg);
}

.scrollable-container {
    max-height: 600px; /* Ajusta la altura máxima según sea necesario */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    border: 1px solid #ccc; /* Opcional: bordes para mejor visibilidad */
    padding-left: 30px; /* Opcional: espacio interno */
    padding-top:20px;
    padding-bottom:20px;
    overflow-x: hidden;
    /*background-color: #f9f9f9;*/ /* Opcional: fondo */
    /*border-radius: 5px; */ /* Opcional: bordes redondeados */
}
:root {
    --multi-document-visibility: visible;
    --multi-document-opacity: 1;
    --multi-document-display: block;

}

.hidden-document {
    visibility: var(--multi-document-visibility);
    opacity: var(--multi-document-opacity);
    transition: opacity 0.3s ease; /* Suaviza la transición */
    display: var(--multi-document-display);
}

/* Style para AssisView */
.initial-assistView {
    all: initial;
    all: unset;
}
.e-aiassistview {
    border: none !important;
}
.assistView.e-icons.bi-stars {
    font-size: 35px !important;
}
.e-aiassistview .e-views, .e-aiassistview .e-custom-view, .e-aiassistview .e-assistview-content-section {
    overflow: auto !important;
}
.e-aiassistview .e-banner-view {
    text-align: center;
}
.e-aiassistview .e-view-header .e-toolbar .e-toolbar-items .e-toolbar-item.e-assist-view-header, .e-aiassistview .e-view-header .e-toolbar .e-toolbar-items .e-toolbar-item.e-custom-view-header {
    display: none;
}

.e-upload-files .file-status {
    font-size: 12px !important;
}

.e-icons.e-assist-send.btn-send-textbox{
    position:absolute;
    top:0;
    bottom:0;
    right:5px;
}

.e-control.e-textbox.e-lib e-input{
    resize:none !important;
}
.textarea.e-input, .e-input-group textarea, .e-input-group textarea.e-input, .e-input-group.e-input-focus textarea, .e-input-group.e-input-focus textarea.e-input, .e-input-group.e-control-wrapper textarea, .e-input-group.e-control-wrapper.e-input-focus textarea, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-control-wrapper.e-input-focus textarea.e-input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea {
    resize: none !important;
    height: 33px;
    min-height: 33px !important;
}

.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled), .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled), .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
    background-color: var(--bs-primary) !important;
    color: red !important;
}
.response-header h1,
.response-header h2,
.response-header h3,
.response-header h4,
.response-header h5,
.response-header h6 {
    font-size: 16px !important;
}
.icon-container1 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: var(--bs-primary) !important; /* Puedes cambiarlo según el tema */
}


/*.expandable-textbox {
    position: relative !important;*/ /* Permite posicionar elementos hijos de manera absoluta */
    /*padding-bottom: 40px !important;*/ /* Espacio suficiente para los iconos */
/*}

.e-input-group-icon {
    position: absolute !important;
    bottom: 5px !important;*/ /* Asegura que estén alineados en la parte inferior */
    /*right: 5px !important;*/ /* Alinea los íconos a la derecha */
    /*height: 33px !important;*/ /* Tamaño fijo */
    /*display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}*/


/*.carousel-card-content {
    width: 200px !important;*/ /* Ajusta el tamaño según lo necesites */
    /*height: 200px !important;*/ /* Igual que el width para hacerlo cuadrado */
    /*display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.carousel-card {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}*/

.icon-container1 {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
}


/* Agrupar 4 tarjetas dentro de cada slide */
.carousel-group {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Cada tarjeta debe ocupar un 25% del ancho total */
.carousel-card {
    width: 25% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Mantener la tarjeta cuadrada */
.carousel-card-content {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Estilos progressBar circle */
.miniprogress-circle {
    position: fixed;
    top: 10px; 
    right: 10px; 
    z-index: 9999;
    pointer-events: none;
    margin-left: 1.5rem
}















/* Campo de texto largo resizable */
.resizable-long-text .e-input {
    resize: both !important;
    height: auto !important;
    overflow: auto !important;
}