/*
--------------------------------------------------------------
    Autor:		Juan Carlos Navarro
    Empresa:		Apps Mexico - www.appsmexico.mx
    Funcion:		
    Fecha Creación:	2021-11-02
    Version:		8.2

    Bitacora de Cambios (Fecha/Autor):
        2021-11-02 - JCNR - 
        2022-05-23 - JCNR - Se agrego clases .k-calendar .k-header porque no se apreciaba el texto
        2022-06-10 - JCNR - Se agrego clase .k-animation-container para que las notificaciones no se oculten. k-custombutton-danger y k-custombutton-success para cambiar el color de los botones a rojo y verde en el grid
        2022-12-13 - JCNR - Se agrego clase .form-control, button > i, .modal-body, .modal-xl, .k-daterange-header, .k-dropdown-header, @media screen and (min-width: 200px)
        2022-12-20 - JCNR - Permite que se muestren los botones de un grid solo cuando se selecciona el renglon o se hace hover sobre el renglon del grid
        2023-01-17 - JCNR - Se agrego id #PantallaIdFavorite
        2023-06-07 - JCNR - Se agrego .k-grid-column-text-xl
        2023-10-24 - JCNR - Se agrego .swal2-confirm.btn.btn-success
        2024-04-14 - JCNR - Se agrego .swal2-container
        2025-05-19 - JCNR - Se agrego .panel
        2025-07-09 - JCNR - Se agrego .k-notification-custom
        2025-08-18 - JCNR - Se agrego .k-grid-EliminarItemButton
        2026-03-17 - JCNR - Se agrego estilos para mostrar el titulo completo de las columnas del grid con altura automatica
        2026-03-18 - JCNR - Se agrego estilos para mostrar los botones de un grid/treelist solo cuando se selecciona el renglon o se hace hover sobre el renglon del grid/treelist
        2026-09-04 - JCNR - Se agrego #toast-container.toast-top-center
--------------------------------------------------------------
*/

button {
    margin: 1px;
}

    button > i {
        margin-right: 5px;
    }

.form-control {
    padding: unset !important;
}

.form-group {
    margin-bottom: 0.5rem;
}

.panel {
    margin-bottom: 0.5rem !important;
}

.k-animation-container {
    /*left: unset !important;*/
    max-width: 1024px;
    padding-left: 20px !important;
    /*    right: 10px;*/
}

.k-card {
    overflow-y: scroll;
}

.k-calendar .k-header {
    background-color: #2198F3;
}

/*Reduce el tamaño de la fuente de los botones*/
.k-button {
    font-size: 0.8rem
}

.k-custombutton-danger {
    color: #fff;
    background-color: #ffbaca;
    border-color: #ffbaca;
}

.k-custombutton-success {
    color: #fff;
    background-color: #aedcae;
    border-color: #aedcae;
}

/*Permite que se muestre el titulo completo de las columnas del grid con altura automatica*/
.k-grid .k-grid-header .k-header {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

    .k-grid .k-grid-header .k-header .k-cell-inner {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-height: auto;
        height: auto;
    }

        .k-grid .k-grid-header .k-header .k-cell-inner > .k-link {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            height: auto;
            display: flex;
            align-items: center;
        }

    .k-grid .k-grid-header .k-header .k-column-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

.k-grid-EliminarItemButton {
    background-color: #dc3545 !important; /* Bootstrap btn-danger */
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    padding: 6px 12px;
    transition: background-color 0.2s;
}

    .k-grid-EliminarItemButton:hover,
    .k-grid-EliminarItemButton:focus {
        background-color: #b52a37 !important;
        color: #fff !important;
    }

/*Envia la notificacion sobre todos los elementos*/
.k-notification-custom, #notification, .k-notification {
    z-index: 99999 !important;
}

/*Los mensajes se anclan a la ventana y por debajo del encabezado fijo, para que se vean sin importar
  cuanto scroll traiga el usuario. En la tablet de 800x1280 el operador trabaja con la pagina abajo,
  sobre el grid de tarimas, y ahi es donde captura las tarimas que pueden dar error.
  El ancho topado evita que un mensaje largo tape la pantalla completa en esa resolucion.*/
#toast-container.toast-top-center {
    position: fixed !important;
    top: 4.5rem !important;
    z-index: 999999 !important;
}

    #toast-container.toast-top-center > div {
        width: 90vw;
        max-width: 40rem;
    }


/*Elimina el subrayado de los links de URL's externas*/
a[target]:not(.btn) {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: !important;
    text-decoration-color: none !important;
}

/*Elimina el padding en el logotipo del menu*/
.info-card {
    padding: 0rem;
}

/*Reduce el espacio entre la ruta de la pagina y el titulo de la pagina*/
.page-breadcrumb {
    margin: 0 0 0.3rem;
}

/*Reduce el espacio entre el titulo de la pagina y el contenido de la pagina*/
.subheader:not(:empty) {
    margin-bottom: calc(0.5rem + 0.625rem);
}

/*Color primario del menu #0f619f*/

/*Cambia el color de los botones del toolbar del grid por el de la clase btn-primary de bootstrap*/
.k-header > .k-button {
    border-color: #2198F3;
    color: #fff !important;
    background-color: #2198F3;
}

/*Cambia el color de los botones del detalle del grid por el de la clase btn-primary de bootstrap*/
/*.k-command-cell > .k-button {
    border-color: #2198F3;
    color: #fff !important;
    background-color: #2198F3;
}
*/
/*Cambia el color del boton para el control Kendo Upload por el de la clase btn-primary de bootstrap*/
.k-upload .k-upload-button {
    color: #fff;
    background-color: #2198F3;
    border-color: #2198F3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

/*Pone en rojo los errores de validation summary*/
.validation-summary-errors {
    color: red;
}

/*Pone en rojo el borde de los controles que no sean validos*/
input:invalid {
    background-color: #ffdddd;
}

form:invalid {
    border: 5px solid #ffdddd;
}

/*input:invalid {
    border: 1px solid red !important;
}

.k-invalid {
    border: 1px solid red !important;
}*/

/*Reduce el ancho minimo para el popup editor de los grids de 400 a 350px*/
.k-edit-form-container {
    min-width: 350px !important;
}

/*2023-01-17 Controla el color de una pantalla que esta agregada al menu de favoritos*/
#PantallaIdFavorite {
    display: none;
}

    #PantallaIdFavorite + label:before {
        content: "\f5c0";
        color: #6dabda;
    }

    #PantallaIdFavorite:checked + label:before {
        content: "\f005";
        color: #FF9A13;
    }

/*Cambios 2016/11/28 - CSS para register form*/
#password_Info_List, #password_Info_List li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#password_Info {
    position: relative;
    bottom: -115px\9;
    width: 350px;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
    z-index: 9999;
    left: 16%;
}

    #password_Info h4 {
        margin: 0 0 10px 0;
        padding: 0;
        font-weight: normal;
    }

    #password_Info::before {
        content: "\25B2";
        position: absolute;
        top: -12px;
        left: 45%;
        font-size: 14px;
        line-height: 14px;
        color: #ddd;
        text-shadow: none;
        display: block;
    }

#js-login .invalidPassword {
    padding-left: 22px;
    line-height: 24px;
    color: #ec3f41;
}

#js-login .validPassword {
    padding-left: 22px;
    line-height: 24px;
    color: #3a7d34;
}

#password_Info {
    display: none;
}

.modal-body {
    overflow-y: auto !important;
}

.k-daterange-header > span {
    width: 150px;
}

.k-dropdown-header {
    width: 100%;
    min-width: 300px;
}

/*Ancho predeterminado para columnas tipo checkbox*/
/*.HtmlAttributes(new { @class = "k-grid-column-checkbox" }).HeaderHtmlAttributes(new { @class = "k-grid-column-checkbox" });*/
.k-grid-column-checkbox {
    min-width: 80px;
    text-align: center !important;
    vertical-align: middle;
    width: 82px;
}

/*Ancho predeterminado y alineacion para columnas con importes*/
/*.Format("{0:c2}").HtmlAttributes(new { @class = "k-grid-column-currency" }).HeaderHtmlAttributes(new { @class = "k-grid-column-currency" });*/
.k-grid-column-currency {
    min-width: 100px;
    text-align: right !important;
    width: 130px;
}

/*Ancho predeterminado y alineacion para columnas con fecha*/
/*.HtmlAttributes(new { @class = "k-grid-column-date" }).HeaderHtmlAttributes(new { @class = "k-grid-column-date" });*/
.k-grid-column-date {
    min-width: 100px;
    text-align: left !important;
    width: 110px;
}

/*Ancho predeterminado y alineacion para columnas con fecha y hora*/
/*.HtmlAttributes(new { @class = "k-grid-column-datetime" }).HeaderHtmlAttributes(new { @class = "k-grid-column-datetime" });*/
.k-grid-column-datetime {
    min-width: 100px;
    text-align: left !important;
    width: 160px;
}

/*Ancho predeterminado y alineacion para columnas con numeros*/
/*.Format("{0:n2}").HtmlAttributes(new { @class = "k-grid-column-number" }).HeaderHtmlAttributes(new { @class = "k-grid-column-number" });*/
.k-grid-column-number {
    min-width: 100px;
    text-align: right !important;
    width: 100px;
}

/*Ancho predeterminado para columnas de texto*/
/*.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains).ShowOperators(false))).HtmlAttributes(new { @class = "k-grid-column-text-sm" }).HeaderHtmlAttributes(new { @class = "k-grid-column-text-sm" });*/
.k-grid-column-text-sm {
    min-width: 100px;
    width: 110px;
}

/*Ancho predeterminado para columnas de texto*/
/*.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains).ShowOperators(false))).HtmlAttributes(new { @class = "k-grid-column-text-md" }).HeaderHtmlAttributes(new { @class = "k-grid-column-text-md" });*/
.k-grid-column-text-md {
    min-width: 150px;
    width: 220px;
}

/*Ancho predeterminado para columnas con texto largo*/
/*.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains).ShowOperators(false))).HtmlAttributes(new { @class = "k-grid-column-text-lg" }).HeaderHtmlAttributes(new { @class = "k-grid-column-text-lg" });*/
.k-grid-column-text-lg {
    min-width: 200px;
    width: 300px;
}

.k-grid-column-text-xl {
    min-width: 300px;
    width: 400px;
}

.swal2-container {
    z-index: 20000 !important; /* Set a high z-index value */
}

.swal2-confirm.btn.btn-success {
    background-color: #28a745;
    border-color: #218838;
    color: #fff;
}

/*Permite que se muestren los botones de un grid/treelist solo cuando se selecciona el renglon o se hace hover sobre el renglon*/
tr > td.commandCustomDisplayHover.k-command-cell > a.k-button {
    display: none;
}

/* Grid: selected row */
tr.k-master-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
tr.k-master-row.k-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
/* TreeList: selected row */
tr.k-treelist-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
tr.k-treelist-row.k-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button {
    display: inline-flex;
}

tr:hover > td.commandCustomDisplayHover.k-command-cell > a.k-button {
    display: inline-flex;
}

tr > td.commandCustomDisplayHover.k-command-cell > button.k-button {
    display: none;
}

/* Grid: selected row */
tr.k-master-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
tr.k-master-row.k-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
/* TreeList: selected row */
tr.k-treelist-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
tr.k-treelist-row.k-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
tr.k-table-row.k-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button {
    display: inline-flex;
}

tr:hover > td.commandCustomDisplayHover.k-command-cell > button.k-button {
    display: inline-flex;
}

/*Fix: Kendo picker/input widgets with .form-control must keep flex layout so the caret button stays inline*/
.k-picker.form-control,
.k-dropdownlist.form-control,
.k-combobox.form-control,
.k-datepicker.form-control,
.k-datetimepicker.form-control,
.k-timepicker.form-control,
.k-numerictextbox.form-control,
.k-dropdown.form-control,
.k-dropdowntree.form-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/*Alinea los botones Save/Cancel del TreeList popup editor a la derecha como en los Grids*/
.k-popup-edit-form .k-actions.k-actions-start {
    justify-content: flex-end;
}

@media screen and (min-width: 200px) {
    .modal-xl {
        max-width: 100% !important;
    }

    .k-daterange-header > span {
        width: 120px;
    }

    .k-dropdown-header {
        max-width: 150px !important;
        min-width: unset;
        width: unset;
    }
}

@media screen and (min-width: 400px) {
    .modal-xl {
        max-width: 100% !important;
    }

    .k-daterange-header > span {
        width: 160px;
    }

    .k-dropdown-header {
        max-width: 200px !important;
        min-width: unset;
        width: unset;
    }

    tr > td.commandCustomDisplayHover.k-command-cell > a.k-button {
        display: inline-flex;
    }

    tr > td.commandCustomDisplayHover.k-command-cell > button.k-button {
        display: inline-flex;
    }

    div.k-widget.k-window {
        min-width: 90% !important;
    }
}

@media screen and (min-width: 768px) {
    .modal-xl {
        max-width: 100% !important;
    }

    .k-dropdown-header {
        width: 100%;
        max-width: unset !important;
        min-width: 200px;
    }

    div.k-widget.k-window {
        min-width: 50% !important;
    }

    tr > td.commandCustomDisplayHover.k-command-cell > a.k-button {
        display: none;
    }

    tr > td.commandCustomDisplayHover.k-command-cell > button.k-button {
        display: none;
    }

    /* Show buttons when row is selected - Grid */
    tr.k-master-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
    tr.k-master-row.k-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
    /* Show buttons when row is selected - TreeList */
    tr.k-treelist-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
    tr.k-treelist-row.k-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button,
    tr.k-table-row.k-selected > td.commandCustomDisplayHover.k-command-cell > a.k-button {
        display: inline-flex;
    }

    tr.k-master-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
    tr.k-master-row.k-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
    /* TreeList */
    tr.k-treelist-row.k-state-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button,
    tr.k-treelist-row.k-selected > td.commandCustomDisplayHover.k-command-cell > button.k-button {
        display: inline-flex;
    }

    /* Show buttons on hover */
    tr:hover > td.commandCustomDisplayHover.k-command-cell > a.k-button {
        display: inline-flex;
    }

    tr:hover > td.commandCustomDisplayHover.k-command-cell > button.k-button {
        display: inline-flex;
    }
}

@media screen and (min-width: 992px) {
    .modal-xl {
        max-width: 90% !important;
    }

    .k-dropdown-header {
        width: 100%;
        max-width: unset !important;
        min-width: 300px;
    }
}