/*Definimos nueva tipografia*/
@font-face {
    font-family: "Lato-Regular";
    src: url("../../fonts/Lato-Regular.ttf");
}

@font-face {
    font-family: "Lato-Bold";
    src: url("../../fonts/Lato-Bold.ttf");
}

@font-face {
    font-family: "Lato-Black";
    src: url("../../fonts/Lato-Black.ttf");
}

body {
    font-family: "Lato-Regular", sans-serif !important;
    background: #eef2f5 !important;
    color: #2d2829 !important;
}

.h1,
h1 {
    font-family: "Lato-Bold";
}
.h2,
h2 {
    font-family: "Lato-Bold";
}
.h3,
h3 {
    font-family: "Lato-Bold";
}
.h4,
h4 {
    font-family: "Lato-Bold";
}
.h5,
h5 {
    font-family: "Lato-Bold";
}
.h6,
h6 {
    font-family: "Lato-Bold";
}

h1, h2, h3, h4, h5, h6 {
    color: #2d2829;
}

label {
    font-family: "Lato-Bold";
}

.panel-title {
    font-family: "Lato-Bold";
}

/*COLORES*/
.text-grismclaro {
    color: #7d828b;
}

.text-grisclaro {
    color: #494d55;
}

.text-grisoscuro {
    color: #2d2829;
}

.text-dorado {
    color: #c2995c;
}

.text-berry {
    color: #970e48;
}

.text-verde {
    color: #287f55;
}

.form-control {
    color: #494d55;
}

.form-control::placeholder {
    color: #494d55;
}

.form-control:focus {
    color: #494d55;
}

.parsley-success {
    border: 1px solid #287f55 !important;
}

.parsley-success:focus {
    border-color: #287f55 !important;
}

.parsley-error {
    border: 1px solid #ff6500 !important;
}

.parsley-error:focus {
    border-color: #ff6500 !important;
}

.parsley-errors-list {
    color: #ff6500 !important;
}

/*PANELES*/
.panel-inverse > .panel-heading {
    background: #970e48;
}

/* .btn-icon */
.panel-heading-btn > a.icon-expand {
    color: #2d2829;
    background: #ffffff;
    border-color: #ffffff;
}

.panel-heading-btn > a.icon-expand:hover {
    background: #e7e7e7;
    border-color: #e7e7e7;
}

.panel-heading-btn > a.btn-circle {
    width: 25px;
    height: 25px;
    font-size: 15px;
    line-height: 25px;
}

.nav-tabs-inverse > .nav-tabs,
.nav-tabs.nav-tabs-inverse {
    background: #970e48;
}

.nav-tabs.nav-tabs-inverse > li.active > a,
.nav-tabs.nav-tabs-inverse > li.active > a:hover,
.nav-tabs.nav-tabs-inverse > li.active > a:focus,
.nav-tabs.nav-tabs-inverse .nav-link.active,
.nav-tabs.nav-tabs-inverse .nav-link.active:hover,
.nav-tabs.nav-tabs-inverse .nav-link.active:focus,
.nav-tabs.nav-tabs-inverse .nav-item.show .nav-link {
    color: #2d2829;
}

.tab-overflow .nav-tabs-inverse .next-button > a,
.tab-overflow .nav-tabs-inverse .prev-button > a,
.nav.nav-tabs.nav-tabs-inverse > li > a,
.nav.nav-tabs.nav-tabs-inverse > li > a:hover,
.nav.nav-tabs.nav-tabs-inverse > li > a:focus {
    background: #970e48;
}

.nav > li > a {
    color: #7d828b;
}

/*SECCION WELCOME*/
.contenedor-sied {
    font-size: 17.5px;
}

.sidebar {
    background: #494d55 !important;
}

.sidebar .nav > li.nav-header {
    color: #ffffff !important;
}

.sidebar .nav > li > a {
    color: #ffffff;
}

/***/
.sidebar .submenu-sidebar > li > a {
    color: #ffffff;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus {
    color: #7d828b;
}

.sidebar .submenu-sidebar > li > a:hover,
.sidebar .submenu-sidebar > li > a:focus,
.sidebar .submenu-sidebar > li.active > a,
.sidebar .submenu-sidebar > li.active > a:hover,
.sidebar .submenu-sidebar > li.active > a:focus {
    color: #7d828b;
}

.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:hover,
.sidebar .nav > li.active > a:focus {
    color: #2d2829;
    background: #e2ded7;
}

.text-theme,
.sidebar .nav > li.active > a i {
    color: #2d2829;
}
/***/
.submenu-sidebar {
    display: none; /* Inicialmente oculto */
    list-style: none;
    padding-left: 20px;
    /* position: relative; */
}

.submenu-sidebar > li > a {
    display: block;
    padding: 8px;
}

/* Resaltar el subítem activo */
.submenu-sidebar li.active {
    color: #2d2829;
    background-color: #e2ded7;
}

.submenu-sidebar li.active > a.active {
    color: #2d2829;
}

/*NUEVOS-BACKGROUNDS-BOTONES*/
/*btn-verde*/
.btn.btn-verde,
.btn.btn-verde.disabled,
.btn.btn-verde.disabled:hover,
.btn.btn-verde.disabled:focus,
.btn.btn-verde[disabled],
.btn.btn-verde[disabled]:hover,
.btn.btn-verde[disabled]:focus {
    color: #fff;
    background: #287f55;
    border-color: #287f55;
}
.btn-verde:hover,
.btn-verde:focus,
.btn-verde:active,
.btn-verde.active,
.btn-verde.active.focus,
.btn-verde.active:focus,
.btn-verde.active:hover,
.btn-verde:active.focus,
.btn-verde:active:focus,
.btn-verde:active:hover,
.show > .btn-verde.dropdown-toggle,
.open > .dropdown-toggle.btn-verde,
.open > .dropdown-toggle.btn-verde:hover,
.open > .dropdown-toggle.btn-verde:focus,
.btn-verde:not(:disabled):not(.disabled).active,
.btn-verde:not(:disabled):not(.disabled):active {
    background: #246f4b;
    border-color: #246f4b;
}
.input-group-append .btn.btn-verde,
.btn-group .btn.btn-verde:not(.active) + .btn.btn-verde,
.input-group-btn .btn.btn-verde:not(.active) + .btn.btn-verde {
    border-left-color: #246f4b;
}
.input-group-prepend .btn.btn-verde {
    border-right-color: #246f4b;
}

/*btn-blackwhite*/
.btn.btn-blackwhite,
.btn.btn-blackwhite.disabled,
.btn.btn-blackwhite.disabled:hover,
.btn.btn-blackwhite.disabled:focus,
.btn.btn-blackwhite[disabled],
.btn.btn-blackwhite[disabled]:hover,
.btn.btn-blackwhite[disabled]:focus {
    color: #fff;
    background: #2d2829;
    border-color: #2d2829;
}
.btn-blackwhite:hover,
.btn-blackwhite:focus,
.btn-blackwhite:active,
.btn-blackwhite.active,
.btn-blackwhite.active.focus,
.btn-blackwhite.active:focus,
.btn-blackwhite.active:hover,
.btn-blackwhite:active.focus,
.btn-blackwhite:active:focus,
.btn-blackwhite:active:hover,
.show > .btn-blackwhite.dropdown-toggle,
.open > .dropdown-toggle.btn-blackwhite,
.open > .dropdown-toggle.btn-blackwhite:hover,
.open > .dropdown-toggle.btn-blackwhite:focus,
.btn-blackwhite:not(:disabled):not(.disabled).active,
.btn-blackwhite:not(:disabled):not(.disabled):active {
    background: #404040;
    border-color: #404040;
}
.input-group-append .btn.btn-blackwhite,
.btn-group .btn.btn-blackwhite:not(.active) + .btn.btn-blackwhite,
.input-group-btn .btn.btn-blackwhite:not(.active) + .btn.btn-blackwhite {
    border-left-color: #404040;
}
.input-group-prepend .btn.btn-blackwhite {
    border-right-color: #404040;
}

/*btn-dorado*/
.btn.btn-dorado,
.btn.btn-dorado.disabled,
.btn.btn-dorado.disabled:hover,
.btn.btn-dorado.disabled:focus,
.btn.btn-dorado[disabled],
.btn.btn-dorado[disabled]:hover,
.btn.btn-dorado[disabled]:focus {
    color: #2d2829;
    background: #c2995c;
    border-color: #c2995c;
}
.btn-dorado:hover,
.btn-dorado:focus,
.btn-dorado:active,
.btn-dorado.active,
.btn-dorado.active.focus,
.btn-dorado.active:focus,
.btn-dorado.active:hover,
.btn-dorado:active.focus,
.btn-dorado:active:focus,
.btn-dorado:active:hover,
.show > .btn-dorado.dropdown-toggle,
.open > .dropdown-toggle.btn-dorado,
.open > .dropdown-toggle.btn-dorado:hover,
.open > .dropdown-toggle.btn-dorado:focus,
.btn-dorado:not(:disabled):not(.disabled).active,
.btn-dorado:not(:disabled):not(.disabled):active {
    background: #d5a763;
    border-color: #d5a763;
}
.input-group-append .btn.btn-dorado,
.btn-group .btn.btn-dorado:not(.active) + .btn.btn-dorado,
.input-group-btn .btn.btn-dorado:not(.active) + .btn.btn-dorado {
    border-left-color: #d5a763;
}
.input-group-prepend .btn.btn-dorado {
    border-right-color: #d5a763;
}

/*btn-whiteborde*/
.btn.btn-whiteborde,
.btn.btn-whiteborde.disabled,
.btn.btn-whiteborde.disabled:hover,
.btn.btn-whiteborde.disabled:focus,
.btn.btn-whiteborde[disabled],
.btn.btn-whiteborde[disabled]:hover,
.btn.btn-whiteborde[disabled]:focus {
    color: #2d2829;
    background: #ffffff;
    border-color: #2d2829;
}
.btn-whiteborde:hover,
.btn-whiteborde:focus,
.btn-whiteborde:active,
.btn-whiteborde.active,
.btn-whiteborde.active.focus,
.btn-whiteborde.active:focus,
.btn-whiteborde.active:hover,
.btn-whiteborde:active.focus,
.btn-whiteborde:active:focus,
.btn-whiteborde:active:hover,
.show > .btn-whiteborde.dropdown-toggle,
.open > .dropdown-toggle.btn-whiteborde,
.open > .dropdown-toggle.btn-whiteborde:hover,
.open > .dropdown-toggle.btn-whiteborde:focus,
.btn-whiteborde:not(:disabled):not(.disabled).active,
.btn-whiteborde:not(:disabled):not(.disabled):active {
    background: #f3f3f3;
    border-color: #2d2829;
}
.input-group-append .btn.btn-whiteborde,
.btn-group .btn.btn-whiteborde:not(.active) + .btn.btn-whiteborde,
.input-group-btn .btn.btn-whiteborde:not(.active) + .btn.btn-whiteborde {
    border-left-color: #2d2829;
}
.input-group-prepend .btn.btn-whiteborde {
    border-right-color: #2d2829;
}

/*btn-crema*/
.btn.btn-crema,
.btn.btn-crema.disabled,
.btn.btn-crema.disabled:hover,
.btn.btn-crema.disabled:focus,
.btn.btn-crema[disabled],
.btn.btn-crema[disabled]:hover,
.btn.btn-crema[disabled]:focus {
    color: #2d2829;
    background: #e2ded7;
    border-color: #e2ded7;
}
.btn-crema:hover,
.btn-crema:focus,
.btn-crema:active,
.btn-crema.active,
.btn-crema.active.focus,
.btn-crema.active:focus,
.btn-crema.active:hover,
.btn-crema:active.focus,
.btn-crema:active:focus,
.btn-crema:active:hover,
.show > .btn-crema.dropdown-toggle,
.open > .dropdown-toggle.btn-crema,
.open > .dropdown-toggle.btn-crema:hover,
.open > .dropdown-toggle.btn-crema:focus,
.btn-crema:not(:disabled):not(.disabled).active,
.btn-crema:not(:disabled):not(.disabled):active {
    background: #efeae2;
    border-color: #efeae2;
}
.input-group-append .btn.btn-crema,
.btn-group .btn.btn-crema:not(.active) + .btn.btn-crema,
.input-group-btn .btn.btn-crema:not(.active) + .btn.btn-crema {
    border-left-color: #efeae2;
}
.input-group-prepend .btn.btn-crema {
    border-right-color: #efeae2;
}

.color-excel {
    background: #017d3d !important;
    border-color: #017d3d !important;
}

.color-excel:hover {
    background: #04743a !important;
    border-color: #04743a !important;
}

.color-word {
    background: #1f63c2 !important;
    border-color: #1f63c2 !important;
}

.color-word:hover {
    background: #1d5bb2 !important;
    border-color: #1d5bb2 !important;
}

/*Estilo DataTable y Paginacion*/
table.table thead th {
    background-color: #000000;
    color: #ffffff;
}

.dataTables_paginate ul.pagination > li.paginate_button > a {
    background-color: #ffffff;
    color: #2d2829;
    border: 1px solid #2d2829;
}

/* Estilo de los botones cuando están deshabilitados */
.dataTables_paginate ul.pagination > li.paginate_button.disabled > a {
    background: #efedea;
    border-color: #efedea;
    border: 1px solid #efedea;
    color: #7d828b;
}

/* Efecto active: cuando un botón está activo (es decir, la página actual) */
.dataTables_paginate ul.pagination > li.paginate_button.active > a {
    background-color: #2d2829 !important;
    border-color: #2d2829 !important;
    border: 1px solid #2d2829 !important;
    color: #ffffff !important;
}

/*WIZAR BACKGROUNDS*/
.sw-main > ul.step-anchor.nav-tabs > li.active > a {
    background: #2d2829 !important;
}

.sw-main > ul.step-anchor.nav-tabs > li.done > a .number,
.sw-main > ul.step-anchor.nav-tabs > li.done > a .number:before {
    background: #494d55 !important;
}

.btn-group.navbar-btn > .sw-btn-prev {
    background-color: #ffffff;
    border-color: #2d2829;
    border: 1px solid #2d2829;
    color: #2d2829;
}
.btn-group.navbar-btn > .sw-btn-prev.disabled {
    background: #efedea;
    border-color: #efedea;
    border: 1px solid #efedea;
    color: #7d828b;
}
.btn-group.navbar-btn > .sw-btn-prev.disabled:hover {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-group.navbar-btn > .sw-btn-next {
    background-color: #2d2829 !important;
    border-color: #2d2829 !important;
    border: 1px solid #2d2829 !important;
    color: #ffffff !important;
}

.btn-group.navbar-btn > .sw-btn-next:hover {
    background-color: #414141 !important;
}

.btn-group.navbar-btn > .sw-btn-next.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bg-lime { background-color: #287f55 !important; }

.bg-yellow { background-color: #f5c518 !important; }

.bg-warning, 
.bg-orange { background-color: #ff6500 !important; }


/*SELECTS*/
.selected-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.custom-selected {
    appearance: none;
    cursor: pointer;
    background-color: transparent !important;
}
.custom-selected:focus {
    background-color: transparent !important;
}

.arrow-box {
    background-color: #2f2b2c;
    width: 50px;
    height: calc(1.75em + 0.75rem + 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 5px 5px 0;
}

.arrow-down {
    width: 8px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/*MODALS*/
.swal-overlay {
    background-color: rgba(45, 40, 41, 0.5);
}

.swal-footer {
    text-align: center;
}

/* Estilo para los botones swal-modal*/
.btn-cancelar {
    background-color: #ffffff; /* Fondo blanco */
    color: #2d2829; /* Color rojo para el texto */
    border: 1px solid #2d2829; /* Borde rojo */
    border-radius: 25px; /* Bordes redondeados */
    padding: 7px 30px; /* Un poco de padding para hacer el botón más grande */
    font-weight: normal;
    transition: all 0.3s ease; /* Transición suave para los cambios */
}

.btn-cancelar:hover {
    background-color: #2d2829; /* Fondo rojo en hover */
    color: #ffffff; /* Cambiar color de texto a blanco */
}

.btn-confirmar {
    font-family: "Lato-Regular";
    background-color: #ff6500; /* Fondo blanco */
    color: #2d2829; /* Color verde para el texto */
    border: 1px solid #ff6500; /* Borde verde */
    border-radius: 25px; /* Bordes redondeados */
    padding: 7px 30px; /* Un poco de padding para hacer el botón más grande */
    font-weight: normal;
    transition: all 0.3s ease; /* Transición suave para los cambios */
}

.btn-confirmar:hover {
    background-color: #ff6500; /* Fondo verde en hover */
    color: #ffffff; /* Cambiar color de texto a blanco */
}

/* Personaliza el icono*/
/* .swal-icon {
    border-width: 6px;
} */
.swal-icon > img {
    width: 100px;
    height: 100px;
}

.swal-icon--warning__body {
    width: 8px;
}

.swal-icon--warning__dot {
    width: 8px;
    height: 8px;
}

.swal-icon--warning__body,
.swal-icon--warning__dot {
    background-color: #ff6500 !important;
}
.swal-icon--warning {
    border-color: #ff6500 !important;
}

/*MODAL-BOOTSTRAP*/
.modal-dialog {
    max-height: 90vh; /* Limita la altura máxima del modal al 90% de la ventana */
    margin: 1.75rem auto; /* Deja algo de espacio en la parte superior e inferior */
}

.modal-content {
    height: 100%; /* Asegura que el contenido ocupe toda la altura del modal */
    display: flex;
    flex-direction: column;
}

.modal-body {
    overflow-y: auto; /* Agrega scroll solo en el cuerpo del modal */
    flex-grow: 1; /* Hace que el cuerpo ocupe el espacio disponible */
}

/* Asegura que el modal esté fijo en la pantalla cuando se abre */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado vertical y horizontal */
    z-index: 1050; /* Asegura que el modal esté por encima del fondo */
}

.modal-title {
    font-family: "Lato-Bold";
}

.modal-header {
    background-color: #eef2f5;
    border-bottom-color: #eef2f5;
}
.close-modal > button.close {
    font-family: "Lato-Bold";
    background-color: #ffffff;
    border-color: #ffffff;
    color: #970e48;
    border-radius: 30px;
    outline: none;
    opacity: 1;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    width: 32px;
    height: 32px;
    font-weight: normal;
}

.close-modal > button.close:hover {
    border: 1px solid #ddd;
}

.modal-footer {
    border-top: 0px;
    justify-content: center;
}

.modal-backdrop {
    background-color: #2d2829;
}

/* Estilo para el Tooltip */
.tooltip {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mostrar el Tooltip cuando la clase "visible" esté activa */
.tooltip.visible {
    display: block;
    opacity: 1;
}