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

    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
--------------------------------------------------------------
*/

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

/*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;
    }
}