/*

    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.

 */


/* Colores de marca. Independientes del tema: van aca y no en app-light/app-dark.
   Los SPs de indicador devuelven var(--jx4-brand-lightblue) en ID4_COLOR_DS. */
:root {
    --jx4-brand-lightblue: #71a6ff;
    --jx4-brand-light-orange: #fed4a3;
    --jx4-brand-orange: #ff8c4c;
}


/* Scrollbars */

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

body {
    font-family: var(--e-font-family) !important;
}

.e-listview .e-list-item {
    border-bottom: 0 solid !important;
}

.e-listview .e-list-group-item {
    padding: 0px 0px 0px 0px !important;
    border-bottom: 0 solid !important;
}

    /* 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: 16px !important;
        padding-right: 15px !important;
        padding-left: 12px !important;
    }

.e-toolbar .e-toolbar-item .e-tbar-btn {
    border: 1px solid !important;
    border-color: var(--jx4-button-border-color-new) !important;
}

    .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
        border: 1px solid !important;
        border-color: var(--jx4-button-border-color-new) !important;
    }


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

    .e-panel-header {
        border-top-left-radius: 6px !important;
        border-top-right-radius: 6px !important
    }
    /* corrige display inline de tailwind en pager de grillas.. ich 15/05/26 */
    .e-pager {
        display: block !important;
    }

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

        .e-card .e-card-header {
            border-bottom: 0 solid !important;
        }
    /* colores de texto de botones primary */
    .e-btn.e-primary, .e-css.e-btn.e-primary {
        background: var(--jx4-button-background) !important;
        border-color: var(--jx4-button-border-color) !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;
        }

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

        .e-btn.e-primary:disabled {
            color: var(--jx4-button-text-color-disabled) !important;
            background: var(--jx4-button-background-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;
    }

    .e-btn {
        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;
    }

    .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;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }


    .bi::before, [class*=" bi-"]::before {
        -webkit-text-stroke: 0.3px currentColor;
    }

    .e-btn-icon {
        color: var(--jx4-toolbar-icon-color-new) !important;
    }

    .bi-tool-alone {
        padding: 0px 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;
        /* PBI 8402: .e-sidebar es display:flex, asi que esto es un flex item.
           Sin width explicito se encoge al contenido (flex-basis:auto) y el
           sidebar queda con aire muerto a la derecha. .content-area-2 ya lo
           hacia; faltaba la misma linea aca.
           min-width:0 permite que los hijos corten con ellipsis. */
        width: 100% !important;
        min-width: 0;
    }

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

    /* PBI 8463: panel lateral de vistas (NavSidebar). El panel es fixed: el lugar se lo
       reserva el margen del contenido, que no cambia durante el peek. */
    :root {
        --jx4-panel-width: 280px;
        --jx4-panel-width-colapsado: 56px;
    }

    .col.main:has(.nav-panel) .mywork-content {
        margin-left: var(--jx4-panel-width-colapsado);
        transition: margin-left .2s ease;
    }

    .col.main:has(.nav-panel-fijado) .mywork-content {
        margin-left: var(--jx4-panel-width);
    }

    .col.main:has(.nav-panel-sin-anim) .mywork-content {
        transition: none;
    }

    /* .col-tab es flex y .e-tab no tiene ancho: se ajustaria a su contenido y el ancho
       porcentual del dashboard (Dashboard.razor.css) nunca creceria. */
    .col-tab:has(.dash-root) > .e-tab {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Containing block de los position:fixed de las vistas (.col-tab con width:98% en
       MyWorkModulo, Admin): sin transform esos porcentajes se miden contra la ventana y
       el contenido se corta a la derecha. SfSidebar lo dejaba en este mismo elemento. */
    .col.main:has(.nav-panel) .mywork-content > :first-child {
        transform: translateX(0);
    }

    /* Una vista en pantalla completa se mide contra la ventana y no contra el transform de arriba.
       .col-tab es position:fixed y arma su propio contexto de apilado: tiene que subir con ella
       para quedar sobre la navegación. */
    .col.main:has(.query-fullscreen) .mywork-content > :first-child {
        transform: none;
    }

    .col-tab:has(.query-fullscreen) {
        z-index: 1001;
    }

    /* sin el boton de colapsar el header no se achica ni pierde sangria */
    .col.main:has(.nav-panel) .header-vista {
        min-height: 38px;
    }

    .col.main:has(.nav-panel) .col-breadcrum {
        padding-left: 20px;
    }

    @media (prefers-reduced-motion: reduce) {
        .col.main:has(.nav-panel) .mywork-content {
            transition: none;
        }
    }



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

    .mywork-content:has(.kanban-layout) {
        overflow-y: hidden !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;
    }

    /* Quita el padding-top de Syncfusion (15px) que crea un gap visible sobre el sticky toolbar */
    .dialog-max-height .e-dlg-content {
        padding-top: 0 !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;
    }

    /* Syncfusion pone overflow:hidden en .e-item.e-active — eso bloquea position:sticky.
       Solo se overridean los .e-item; .e-content conserva overflow-y:auto para el scroll interno. */
    #tab-no .e-content > .e-item,
    #tab-no .e-content > .e-item.e-active {
        overflow: visible !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;
    }

    .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
        height: 42px !important;
    }

    .e-tab .e-tab-header {
        border-bottom: 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;
    }
/* 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 {
        --jx4-sticky-top: 70px;
        --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;
    }
    /* botón flotante (clase asignada a SfButton via CssClass="bot-fab") */
    .bot-fab {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 100001;
        width: 45px;
        height: 45px;
        border-radius: 50% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
    }
    /* dialogo tipo chat a la derecha (CssClass="jx-bot" en SfDialog) */
    .jx-bot.e-dialog {
        border-radius: 16px;
        overflow: hidden;
    }

    .jx-bot .e-dlg-header-content {
        padding: 10px 14px;
        font-weight: 600;
    }

    .jx-bot .e-dlg-content {
        padding: 0;
        height: calc(85vh - 48px);
        overflow: auto;
    }
    /* Mueve el popup hacia ARRIBA en QuickActions AiBot */
    #qaSuggestCombo_popup.e-popup {
        transform: translateY(calc(-100% - 8px)) !important;
        margin-bottom: 8px !important;
        z-index: 10010 !important;
    }
        /* --- Shell del popup: redondeo real y sombra --- */
        #qaSuggestCombo_popup.e-popup,
        #qaSuggestCombo_popup.e-popup.e-popup-open,
        #qaSuggestCombo_popup.e-ddl.e-popup {
            border-radius: 12px !important;
            overflow: hidden !important;
            border: 1px solid #E2E5EA !important;
            z-index: 10020 !important;
        }

/* Toast base */
.e-toast-container .e-toast.jx-toast {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

    /* SUCCESS */
    .e-toast-container .e-toast.jx-toast.e-toast-success {
        background-color: #123524 !important;
        border-color: #22c55e !important;
    }

        .e-toast-container .e-toast.jx-toast.e-toast-success .e-toast-message .e-toast-title,
        .e-toast-container .e-toast.jx-toast.e-toast-success .e-toast-message .e-toast-content,
        .e-toast-container .e-toast.jx-toast.e-toast-success .e-toast-icon,
        .e-toast-container .e-toast.jx-toast.e-toast-success .e-toast-close-icon {
            color: #bbf7d0 !important;
        }

    /* INFO */
    .e-toast-container .e-toast.jx-toast.e-toast-info {
        background-color: #102a43 !important;
        border-color: #38bdf8 !important;
    }

        .e-toast-container .e-toast.jx-toast.e-toast-info .e-toast-message .e-toast-title,
        .e-toast-container .e-toast.jx-toast.e-toast-info .e-toast-message .e-toast-content,
        .e-toast-container .e-toast.jx-toast.e-toast-info .e-toast-icon,
        .e-toast-container .e-toast.jx-toast.e-toast-info .e-toast-close-icon {
            color: #bae6fd !important;
        }

    /* WARNING */
    .e-toast-container .e-toast.jx-toast.e-toast-warning {
        background-color: #3f2e09 !important;
        border-color: #facc15 !important;
    }

        .e-toast-container .e-toast.jx-toast.e-toast-warning .e-toast-message .e-toast-title,
        .e-toast-container .e-toast.jx-toast.e-toast-warning .e-toast-message .e-toast-content,
        .e-toast-container .e-toast.jx-toast.e-toast-warning .e-toast-icon,
        .e-toast-container .e-toast.jx-toast.e-toast-warning .e-toast-close-icon {
            color: #fde68a !important;
        }

    /* ERROR / DANGER */
    .e-toast-container .e-toast.jx-toast.e-toast-danger {
        background-color: #3b1218 !important;
        border-color: #f87171 !important;
    }

        .e-toast-container .e-toast.jx-toast.e-toast-danger .e-toast-message .e-toast-title,
        .e-toast-container .e-toast.jx-toast.e-toast-danger .e-toast-message .e-toast-content,
        .e-toast-container .e-toast.jx-toast.e-toast-danger .e-toast-icon,
        .e-toast-container .e-toast.jx-toast.e-toast-danger .e-toast-close-icon {
            color: #fecaca !important;
        }

    /* Botón cerrar */
    .e-toast-container .e-toast.jx-toast .e-toast-close-icon {
        opacity: 1 !important;
    }

/* Tooltip Próximos vencimientos */
.dash-vnc-tooltip.e-tooltip-wrap {
    max-width: 320px !important;
}

.dash-vnc-tt {
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1.5;
}

.dash-vnc-tt strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.dash-vnc-tt p {
    margin: 0 0 8px 0;
}

.dash-vnc-tt ul {
    margin: 0 0 8px 0;
    padding-left: 16px;
}

.dash-vnc-tt li {
    margin-bottom: 4px;
}


/* Animación única de la ventana de Caso (FormCaso).
 * Se usa al abrir desde un registro y al cerrar (X, Esc, Cancelar, guardar y
 * cerrar). Minimizar y restaurar desde la bandeja tienen su propia animación
 * hacia/desde el botón del Caso (Dialog._animateCaseWindowToChip/FromChip).
 * Las clases las aplica window.Dialog.animateCaseWindowIn/Out (app.js) sobre
 * el .e-dlg-container; la animación propia de Syncfusion está en None. */
.e-dlg-container {
    /* Tiempos y curvas de Windows 11 (Fluent): abrir desacelera, cerrar es
       más corto y acelera. Minimizar/restaurar hacia la bandeja se anima en
       app.js porque depende de dónde está el botón del Caso. */
    --jx-case-anim-in-duration: 250ms;
    --jx-case-anim-out-duration: 170ms;
    --jx-case-anim-in-easing: cubic-bezier(.1, .9, .2, 1);
    --jx-case-anim-out-easing: cubic-bezier(.7, 0, 1, .5);
}

@keyframes jx-case-window-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

@keyframes jx-case-window-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(.96); }
}

@keyframes jx-case-overlay-in {
    from { opacity: 0; }
}

@keyframes jx-case-overlay-out {
    to { opacity: 0; }
}

.e-dlg-container.jx-case-anim-in > .e-dialog {
    animation: jx-case-window-in var(--jx-case-anim-in-duration) var(--jx-case-anim-in-easing);
    will-change: transform, opacity;
}

.e-dlg-container.jx-case-anim-in > .e-dlg-overlay {
    animation: jx-case-overlay-in var(--jx-case-anim-in-duration) var(--jx-case-anim-in-easing);
}

/* forwards: la ventana queda invisible hasta que Syncfusion la oculta. */
.e-dlg-container.jx-case-anim-out > .e-dialog {
    animation: jx-case-window-out var(--jx-case-anim-out-duration) var(--jx-case-anim-out-easing) forwards;
    will-change: transform, opacity;
}

.e-dlg-container.jx-case-anim-out > .e-dlg-overlay {
    animation: jx-case-overlay-out var(--jx-case-anim-out-duration) var(--jx-case-anim-out-easing) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .e-dlg-container.jx-case-anim-in > .e-dialog,
    .e-dlg-container.jx-case-anim-in > .e-dlg-overlay,
    .e-dlg-container.jx-case-anim-out > .e-dialog,
    .e-dlg-container.jx-case-anim-out > .e-dlg-overlay {
        animation: none;
    }
}

/* Opciones de usuario y ajustes (DlgAjustes). El footer lo arma Syncfusion fuera del
   alcance del CSS aislado del componente, por eso el separador y el padding van aca. */
.dlg-ajustes .e-dlg-content {
    padding: 8px 24px 16px !important;
}

.dlg-ajustes .e-footer-content {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--color-sf-border-light);
}