/*
 *
 *  CUSTOMIZE ESTILOS BACKOFFICE
 * 
 */
 
/*
 *  Colores
 */
 
:root {
	/* General */
	--bs-primary: #f72717;
	--bs-text-primary: #f72717;
	--bs-menu-link-color-hover: #f72717;
	
	/* Swal */
	--swal2-confirm-button-background-color: #f72717;
	
	/* DataTables */
	--bs-component-hover-color: #f72717;
	--bs-component-active-bg: #f72717;
}

/*
 *  Nuevas fuentes
 */

/*
 *  Estilos Generales
 */

html, body {
	font-family: Poppins, Helvetica, sans-serif !important;
	font-weight: 400;
	line-height: 1.5;
	font-size: 18px;
	color: #004666;
	background: white;
	height: 100%;
	margin: 0;
	color: #004666;
}

header, footer {
	padding: 0;
}

#kt_app_toolbar{
    z-index: 90; /* Menor que header (100), mayor que content */
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Opcional */
}

main {
	flex: 1;
	background-color: #004666;
}

.container-fluid {
	background-color: white;
}

#contenedor-general {
	flex-grow: 1;
	min-height: 0;
}

.text-secondary-foreground {
	color: #004666;
	font-size: 12px;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: Poppins, Helvetica, sans-serif;
	color: #004666;
}

.menu-nivel-1 {
	font-family: Poppins, Helvetica, sans-serif;
	color: #004666 !important;
	font-size: 16px;
}

.menu-nivel-2 {
	font-family: Poppins, Helvetica, sans-serif;
	color: #004666;
	font-size: 14px;
}

input, a, span:not(i span){
	font-family: Poppins, Helvetica, sans-serif;
}

@media (max-width: 991.98px) {
	.menu-nivel-1 {
		font-size: 14px;
	}
	
	.menu-nivel-2 {
		font-size: 12px;
	}
}

.border-bottom {
	border-bottom: 1px solid #004666;
} 

.alto-100-spacing {
	height: calc( 100% - 75px );
}

.kt-menu-item.active .menu-nivel-1 {
	color: white !important;
}


.kt-menu-item.active .text-secondary-foreground {
	color: white !important;
}

.kt-menu-item-active\:bg-background {
    .kt-menu-item.active & {
    	background-color: #004666;
	}
}

.kt-menu-item-active\:border-border {
    .kt-menu-item.active & {
        border-color: #004666;
    }
}

.text-mono {
	color: #004666;
	font-size: 22px;
}

.text-foreground {
	color: #004666 !important;
}

.border-green-500 {
	border-color: #004666;
}

.ki-filled {
	color: white;
}

@media (max-width: 720px) {
	#kt_app_header{
		position: fixed;
		left: 0; right: 0;
		z-index: 9999;
	}
	
	#kt_app_toolbar{
	    margin-top: 60px;
	}
	
	#kt_app_content {
    	padding-top: 10px;
	}

	.ki-filled {
		color: #004666;
	}
}


/*
 *  Svg de los iconos de la barra del menu
 */

.kt-menu-item .kt-menu-link .kt-menu-icon .svg-icon svg {
	width: 23px !important;
	height: 23px !important;
}

.kt-menu-item .kt-menu-link .kt-menu-icon .svg-icon svg g [fill] {
	fill: #004666 !important;
}

.kt-menu-item.active .kt-menu-link .kt-menu-icon .svg-icon svg g [fill] {
	fill: #B3F2F7 !important;
}

.kt-menu-item .kt-menu-link .svg-icon {
	padding-left: 5px !important;
}

.kt-menu-item .kt-menu-link .svg-icon svg {
	width: 23px !important;
	height: 23px !important;
}

.kt-menu-item .kt-menu-link .svg-icon svg g [fill] {
	fill: #004666 !important;
}

.kt-menu-item.active .kt-menu-link .svg-icon svg g [fill] {
	fill: #B3F2F7 !important;
}

.kt-dropdown-menu-link {
    color: #004666 !important;
}

.kt-dropdown-menu-link {
    i {
    	color: #004666 !important;
    }
}

.mensaje-card {
    position: fixed;
    top: 110px;
    right: 50px;
    min-width: 250px;
    /*max-width: 350px;*/
    padding: 1rem 1.25rem;
    border-radius: 0.625rem; /* rounded-2xl */
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1055;
    font-size: 16px;
    font-family: 'VWAG-The-Sans-Light', serif;
	color: #004666;
}
.mensaje-card-show {
    opacity: 1;
    transform: translateY(0);
}
.mensaje-card-hide {
    opacity: 0;
    transform: translateY(-20px);
}

.bg-success {
	background-color: #0abb87;
}

.bg-danger {
	background-color: #fd397a;
}

.bg-warning {
	background-color: #ffb822;
}

.bg-info {
	background-color: #5578eb;
}

.text-dark {
	color: dark;
}

.text-white {
	color: white;
}


/*
 *  Botones
 */
.btn {
	font-family: Poppins, Helvetica, sans-serif;
}

.btn.btn-login {
	padding: .75rem 3.75rem;
	font-size: 1.2rem;
}

.btn.btn-outline.btn-login-primary {
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.8);
}
.btn.btn-outline.btn-login-secondary {
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
}

.btn.btn-outline.btn-login-primary:hover, .btn.btn-outline.btn-login-secondary:hover {
	border-color: #000000;
    color: #000000;
}

.btn.btn-primary {
	font-size: 13px;
	background-color: #5d78ff;
	border-color: #5d78ff;
	color: white;
}

.btn.btn-primary:hover {
	background-color: #004666;
	border-color: #004666;
	color: white;
}

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary.focus:not(.btn-text) {
	background-color: #004666 !important;
	border-color: #004666 !important;
	color: white !important;
}

.kt-btn-primary {
	background-color: #B3F2F7 !important;
	border-color: #B3F2F7 !important;
	color: #004666 !important;
}

.kt-btn-primary:hover {
	background-color: #004666 !important;
	border-color: #004666 !important;
	color: white !important;
}

.kt-card {
	border-color: #004666;
}

.hover\:bg-accent\/60 {
    &:hover {
        @media (hover: hover) {
            @supports (color: color-mix(in lab, red, red)) {
                background-color:  color-mix(in oklab, #B3F2F7 60%, transparent);
            }
        }
    }
}
.hover\:bg-accent\/60 {
    &:hover {
        @media (hover: hover) {
            background-color: #B3F2F7;
        }
    }
}

.kt-dropdown-menu-link {
    &:hover {
        @media (hover: hover) {
            background-color: #B3F2F7;
        }
    }
}

/*
.kt-btn {
    color: #004666;
    background-color: #B3F2F7;
    border-color: #B3F2F7;
    font-family: 'VWAG-The-Sans', serif;
    font-size: 16px;
}

.kt-btn:hover {
    color: white;
    background-color: #004666;
    border-color: #004666;
}
*/

/*
 *  LINKS
 */
 
.link.link-login{
	color: #99A1B7;
	position: relative;
	display: inline-block;
}
.link.link-login:after{
	display: block;
    content: '';
    position: absolute;
    bottom: 0;
    top: 1rem;
    left: 0;
    width: 0%;
    transition: width 0.3s ease;
}
.link.link-login:hover:after{
	border-bottom: 1px solid #3e5fff;
    opacity: 0.3;
    width: 100%;
}
 
/*
 *  CAMPOS FORMULARIO
 */
 
.card.card-custom > .card-header .card-title, .card.card-custom > .card-header .card-title .card-label {
	font-family: Poppins, Helvetica, sans-serif;
	font-size: 28px;
	color: #004666;
}

.form-control,
.form-control select,
.form-control select option .form-control select > option {
	font-family: Poppins, Helvetica, sans-serif;
	font-size: 13px;
	color: #004666;
}

.form-control.form-login{
    height: 50px;
    border-radius: 50px;
    border: none;
    padding: 0 1.5rem;
    margin-top: 1.5rem;
    background: rgba(67, 34, 167, 0.4);
    color: #000000;
}

.form-control.form-login:focus{
    background: rgba(67, 34, 167, 0.4);
    color: #000000;
}

/*
 *  MENSAJES ERROR VALIDACION FORMULARIO
 */

.fv-help-block {
	color: #ff4963;
	font-weight: 400;
	font-family: 'VWAG-The-Sans', serif;
	font-size: 16px;
}

/*
 *	CONTAINERS
 */
 
#div_login_signin, #div_login_signup, #div_login_forgot{
	display: none;
}
.login-container.login-signin #div_login_signin, .login-container.login-signup #div_login_signup, .login-container.login-forgot #div_login_forgot{
	display: block;
}

.container.login-container{
	width: 430px;
}

.container.login-head{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.container.login-head .login-title{
	color: #000000;
}
.container.login-head .login-desc{
	color: rgba(0, 0, 0, 0.8);
}
 
/*
 *	TABLAS
 */
 
table.table.table-fixed{
	table-layout: fixed !important;
	word-wrap: break-word;
}
 
table.table.dt-responsive th,
table.table.dt-responsive td {
    white-space: nowrap;
}

td.icon-success.dtr-control::before { background-color: green !important; }
td.icon-warning.dtr-control::before { background-color: orange !important; }
td.icon-danger.dtr-control::before  { background-color: red !important; }
 
/*
 *	PERSONALIZADOS
 */
 
.block-row-center{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
 
.tooltip-purple {
	position: relative;
}
.tooltip-purple:hover .tooltip-container {
	visibility: visible;
	opacity: 1;
}
 
.tooltip-purple .tooltip-container {
    visibility: hidden;
    width: auto;
    background-color: #555;
    border-radius: 6px;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip-purple .tooltip-container:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}
.tooltip-purple .tooltip-container .tooltip-text{
    color: white;
}

@media (max-width: 720px) {
	.formacion-content img, .formacion-content iframe{
		width: -webkit-fill-available !important;
		width: -moz-available !important;
		width: fill-available !important;
	}
}