/* Add here all your CSS customizations */
/* ----------------- Admin ----------------- */

html.dark .checkbox-primary label:before,
.checkbox-primary label:before {
	background: #9a3324;
	border-color: #852c1f;
}

html.dark .checkbox-text-primary input[type="checkbox"]:checked + label:after,
.checkbox-text-primary input[type="checkbox"]:checked + label:after {
	color: #9a3324;
}

html.dark .radio-primary input[type="radio"]:checked + label:after,
.radio-primary input[type="radio"]:checked + label:after {
	background: #9a3324;
	box-shadow: 0px 0px 1px #9a3324;
}

.switch.switch-primary .ios-switch .on-background {
	background: #9a3324;
}

.progress-bar {
	background-color: #9a3324;
}

.progress .progress-bar-primary {
	background-color: #9a3324;
}

.slider-primary .ui-slider-range,
.slider-primary .ui-slider-handle {
	background: #9a3324;
}

.slider-gradient.slider-primary .ui-slider-range,
.slider-gradient.slider-primary .ui-slider-handle {
	background-image: linear-gradient(to left, #c3412e 0, #9a3324 50%, #71251a 100%);
}

.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-handle {
	background-image: linear-gradient(to right, #c3412e 0, #9a3324 50%, #71251a 100%);
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover,
.datepicker table tr td span:hover {
	background: #9a3324;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
	background: #9a3324;
}

.datepicker table thead tr:last-child th:hover {
	color: #9a3324;
}

.datepicker table tbody tr td.day:hover {
	background: #9a3324;
}

.datepicker table tbody tr td.day.active {
	background: #71251a;
}

html:not(.sidebar-light) .datepicker.datepicker-dark {
	background: transparent;
}

html:not(.sidebar-light) .datepicker.datepicker-dark table tbody tr td.day:hover {
	background: #9a3324;
}

html:not(.sidebar-light) .datepicker.datepicker-dark table tbody tr td.day.active {
	background: #71251a;
}

.datepicker.datepicker-primary table thead tr:first-child {
	background-color: #9a3324;
}

.datepicker.datepicker-primary table thead tr:first-child th:hover {
	background-color: #71251a;
}

.datepicker.datepicker-primary table thead tr:last-child {
	background-color: #af3a29;
}

.datepicker.datepicker-primary table thead tr:last-child th:hover {
	background-color: #9a3324;
	color: #FFF;
}

.select2-container-multi .select2-choices .select2-search-choice {
	background: #9a3324;
}

.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
	background-color: #9a3324 !important;
}

.dataTables_processing {
	background-color: #9a3324;
}

.liquid-meter-wrapper .liquid-meter-selector a.active {
	color: #9a3324;
}

.multiselect-container > .active > a,
.multiselect-container > .active > a:hover,
.multiselect-container > .active > a:focus {
	background-color: #9a3324;
}

/* ----------------- Extension  ----------------- */

html.dark .checkbox-primary label:before,
.checkbox-primary label:before {
	background: #9a3324;
	border-color: #852c1f;
}

html.dark .checkbox-text-primary input[type="checkbox"]:checked + label:after,
.checkbox-text-primary input[type="checkbox"]:checked + label:after {
	color: #9a3324;
}

html.dark .radio-primary input[type="radio"]:checked + label:after,
.radio-primary input[type="radio"]:checked + label:after {
	background: #9a3324;
	box-shadow: 0px 0px 1px #9a3324;
}

.switch.switch-primary .ios-switch .on-background {
	background: #9a3324;
}

.progress-bar {
	background-color: #9a3324;
}

.progress .progress-bar-primary {
	background-color: #9a3324;
}

.slider-primary .ui-slider-range,
.slider-primary .ui-slider-handle {
	background: #9a3324;
}

.slider-gradient.slider-primary .ui-slider-range,
.slider-gradient.slider-primary .ui-slider-handle {
	background-image: linear-gradient(to left, #c3412e 0, #9a3324 50%, #71251a 100%);
}

.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-handle {
	background-image: linear-gradient(to right, #c3412e 0, #9a3324 50%, #71251a 100%);
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover,
.datepicker table tr td span:hover {
	background: #9a3324;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
	background: #9a3324;
}

.datepicker table thead tr:last-child th:hover {
	color: #9a3324;
}

.datepicker table tbody tr td.day:hover {
	background: #9a3324;
}

.datepicker table tbody tr td.day.active {
	background: #71251a;
}

html:not(.sidebar-light) .datepicker.datepicker-dark {
	background: transparent;
}

html:not(.sidebar-light) .datepicker.datepicker-dark table tbody tr td.day:hover {
	background: #9a3324;
}

html:not(.sidebar-light) .datepicker.datepicker-dark table tbody tr td.day.active {
	background: #71251a;
}

.datepicker.datepicker-primary table thead tr:first-child {
	background-color: #9a3324;
}

.datepicker.datepicker-primary table thead tr:first-child th:hover {
	background-color: #71251a;
}

.datepicker.datepicker-primary table thead tr:last-child {
	background-color: #af3a29;
}

.datepicker.datepicker-primary table thead tr:last-child th:hover {
	background-color: #9a3324;
	color: #FFF;
}

.select2-container-multi .select2-choices .select2-search-choice {
	background: #9a3324;
}

.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
	background-color: #9a3324 !important;
}

.dataTables_processing {
	background-color: #9a3324;
}

.liquid-meter-wrapper .liquid-meter-selector a.active {
	color: #9a3324;
}

.multiselect-container > .active > a,
.multiselect-container > .active > a:hover,
.multiselect-container > .active > a:focus {
	background-color: #9a3324;
}

/*lio*/
.bg-stripped {
    background-color: #F2F2F2 !important;
}


@media(max-width:768px){

    .row {
        --bs-gutter-x: 0rem;    
        padding-left: 0;
        padding-right:0;
    }

    .card-body {
        padding: 0.5rem;
    }

    .content-body {
        padding-left : 1.0rem;
        padding-right: 0.5rem;
    }

    .table {
        padding: 0.3rem;
    }
    .table > :not(caption) > * > *{
        padding: 0.3rem 0.3rem;
    }

    .card.card-modern .card-body {
        padding: 0.3rem;
    }
             
    .card.card-modern .card-header{
        padding: 1.3rem;
    }


    .dropdown-menu .show {
        min-width: inherit;
        display: inline-block;
    }
}


.bg-gray {
    background-color: #d3d3d3; /* Color gris personalizado */
}


/* Estilo general del grid */
.jsgrid {
    border: none; /* Elimina el borde del grid */
}

/* Estilo para las filas del grid */
.jsgrid-row {
    border: none; /* Elimina el borde de las filas */
}

/* Estilo para las celdas del grid */


/* Estilo para los encabezados */
.jsgrid-grid-header {
    /*border: none;*/
}

.jsgrid-header-cell {
    background-color: rgba(255, 255, 255, 0) !important; /* Fondo transparente */
    border: none !important; /* Eliminar bordes */
    font-weight: bold;
    /*text-align: center;
                font-weight: bold;
                color: #333;
                padding: 10px;
                box-shadow: none;*/ /* Opcional: elimina cualquier sombra */
}

    .jsgrid-header-cell:hover {
        background-color: rgba(240, 240, 240, 0.5); /* Fondo semi-transparente al pasar el cursor */
    }

.jsgrid-header-cell-sortable {
    cursor: pointer;
}

.jsgrid-header-row {
    background-color: rgba(255, 255, 255, 0.95); /* Fondo ligero */
    border: none;
}

/* Opcional: elimina bordes del contenedor del grid */
.jsgrid-table {
    border-collapse: collapse; /* Elimina colapso de bordes */
    width: 100%;
}

.jsgrid-header-cell, .jsgrid-cell {
    border: none; /* Elimina bordes de celdas y encabezados */
}

.jsgrid-grid-header {
    border: none;
    overflow: hidden;
}

.jsgrid-grid-body {
    border: none;
    /*overflow: hidden;*/
}

.jsgrid-align-right {
    text-align: right !important;
}

.jsgrid-alt-row > .jsgrid-cell {
    background-color: rgba(240, 240, 240, 1);
}

/* Cambia el color del triángulo de orden ascendente */
.jsgrid-header-sort-asc::before {
            border-bottom-color: #000000 !important;
        }

        /* Cambia el color del triángulo de orden descendente */
.jsgrid-header-sort-desc::before {
            border-top-color: #000000 !important;
        }

/*pager de jsgrid*/
    /* Íconos más grandes para mejor visibilidad móvil */
    .jsgrid-pager-container {
        font-size: 1.4em;
        padding: 0.5em;
        flex-wrap: wrap;
    }

    /* Centrado y espaciado en móvil */
    @media (max-width: 600px) {
        .jsgrid-pager-container {
            display: flex;
            justify-content: center;
            gap: 0.5em;
        }

        .jsgrid-pager-page,
        .jsgrid-pager-nav-button {
            padding: 0.3em 0.3em;
            min-width: 2em;
        }
    }

.badge-efe {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 22px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    border-radius: 4px;
    text-transform: none; /* Evita que Bootstrap lo ponga todo en mayúsculas si es el caso */
    font-weight: bold;
}
/* Unificar altura de todos los badges en la tabla */
.jsgrid-cell .badge {
    display: inline-flex !important;
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    height: 22px !important; /* Altura fija para todos */
    /*min-width: 80px;*/ /* Opcional: para que no varíen tanto en ancho */
    font-size: 11px !important;
    padding: 0 10px !important; /* Eliminamos padding vertical para que mande el height */
    line-height: 1 !important;
    border-radius: 4px; /* Estilo Porto */
}

/* Asegurar que el contenedor mantenga la línea */
.jsgrid-cell div.d-flex {
    height: 22px; /* Misma altura que el badge */
    display: flex;
    align-items: center;
}

/* Si el botón existe, que mida lo mismo que el badge */

.jsgrid-cell .btn-xs {
    height: 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Redondeado de esquinas */
    border-radius: 4px !important;
    /* Espaciado inteligente */
    padding: 0 8px !important; /* Da aire a los botones con texto */
    min-width: 22px; /* Asegura que los de solo icono sean al menos cuadrados */
    margin-left: 4px !important;
    font-size: 10px !important;
    line-height: 1;
    /*border: none;*/
}

    /* Ajuste específico para el icono dentro del botón */
    .jsgrid-cell .btn-xs i {
        margin: 0;
        padding: 0;
    }



/*END pager de jsgrid*/




.efe-disabled-button {
    pointer-events: none; /* Desactiva todos los eventos de puntero, incluido el click */
    opacity: 0.5; /* Opcional: hace que el botón se vea visualmente deshabilitado */
    cursor: not-allowed; /* Opcional: cambia el cursor para indicar que no se puede hacer clic */
}


.dirty {
    border-bottom-width: 8px; /* Especifica el grosor del borde inferior */
    border-bottom-style: solid; /* Asegúrate de definir un estilo de borde */
    border-bottom-color: #000; /* Color del borde */
}

.bad_date {
    border-top-width: 8px; /* Especifica el grosor del borde superior */
    border-top-style: solid; /* Asegúrate de definir un estilo de borde */
    border-top-color: #f00; /* Color del borde */
}

.tr_resaltado_old {
    border-width: 4px; /* Especifica el grosor del borde inferior */
    border-bottom-style: solid; /* Asegúrate de definir un estilo de borde */
    border-bottom-color: #000; /* Color del borde */
    background-color: yellow !important;
    font-weight: bold;
    /*font-size:large;*/

}

.tr_resaltado{
    font-weight: bold;
    /*font-size:large;*/
}


textarea {
    line-height: 1.4 !important;
}



/*efe legacy*/
.buttoncico {
    cursor: pointer;
    color: #4b4b4b;
    font: normal 12px Tahoma, Arial, sans-serif;
    text-decoration: none;
    padding: 4px 8px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: #f3f3f3;
    background-image: url(../../img/flecha_orden.png);
    background-position: 5px 4px;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    border: solid 1px #dcdcdc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    top: 0px;
    left: 0px;
    margin-left: 2px;
}


a.buttoncico:hover {
    color: #363637;
    border-color: #4c4c4c;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

a.buttoncico:active {
    color: #000;
    border-color: #444;
}


/* Asegurar que el contenedor de select2 no rompa el layout */
.select2-container {
    flex: 1 1 auto;
    width: auto !important;
}


/* SweetAlert2 */
/*.swal2-container {
    z-index: 11000 !important;
}*/

.swal2-close{
    position:absolute !important;
}
#html.dark {
    .swal2-show
    {
        background: #2e353e !important;
    }
}


/* PNotify */
/*.ui-pnotify {
    z-index: 12000 !important;
}*/

/* Ajusta el valor según sea necesario, 10000 suele ser suficiente */
.custom-swal-porto {
    z-index: 11000 !important;
}
/* Unificar fuente con el resto de la web */
.custom-swal-porto {
    font-family: inherit !important;
}

/* Reducir tamaño del Título */
.swal-title-porto {
    font-size: 1.25rem !important; /* Ajusta a tu gusto */
    font-weight: 600 !important;
    /*margin-top: 1px !important;*/ /* Reduce espacio superior */
    color: #444 !important; /* Gris oscuro en lugar de negro puro */
}

/* Reducir tamaño del Cuerpo de texto */
.swal-text-porto {
    font-size: 0.9rem !important; /* Tamaño más pequeño y legible */
    line-height: 1.6;
    color: #666;
    margin: 10px 20px !important;
}

/* Ajustar el tamaño general de la caja (opcional) */
.swal2-popup {
    width: 30em !important; /* Hace el alert un poco más estrecho */
    padding: 2rem !important;
}




/*Integración con sweetAlert2*/



/*End end lio*/