

:root{

	--mega-azul:        #2D279C !important;
	--mega-azul-oscuro: #201C6E !important;
	--mega-azul-suave:  #EEEDFA !important;
	--mega-rojo:        #EA1C24 !important;
	--mega-rojo-suave:  #FDEAEA !important;
	--mega-verde:       #00B150 !important;
	--mega-verde-suave: #E5F8ED !important;
	--mega-amarillo:    #FDF100 !important;
	--mega-amarillo-suave:#FFFCDB !important;
	--mega-gris:        #8E8D8F !important;
	--mega-gris-claro:  #F4F5F7 !important;
	--mega-gris-borde:  #E4E6EB !important;
	--mega-texto:       #2B2B33 !important;

	--mega-font-title: 'Montserrat', sans-serif !important;
	--mega-font-body:  'Open Sans', sans-serif !important;

	--mega-radius: 2rem !important;
	--mega-radius-sm: 8px !important;
	--mega-shadow: 0 2px 10px rgba(45, 39, 156, 0.06) !important;
}


body{
	font-family: var(--mega-font-body) !important;
	color: var(--mega-texto) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.btn{
	font-family: var(--mega-font-title) !important;
}




#cardTable{
	border: 1px solid var(--mega-gris-borde) !important;
	border-radius: var(--mega-radius) !important;
	box-shadow: var(--mega-shadow) !important;
	background: #ffffff !important;
}

#cardTable .card-header{
	background: #ffffff !important;
	border-bottom: 1px solid var(--mega-gris-borde) !important;
	border-radius: var(--mega-radius) var(--mega-radius) 0 0 !important;
	padding: 1.1rem 1.25rem !important;
}

.card{
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
	
}


.btn{
	font-weight: 600 !important;
	font-size: 0.82rem !important;
	letter-spacing: .01em !important;
	border-radius: 999px !important;
	transition: filter .15s ease, transform .1s ease !important;
}

.btn:active{
	transform: translateY(1px) !important;
}

.btn.backColor{
	background-color: var(--mega-azul) !important;
	border-color: var(--mega-azul) !important;
	color: #ffffff !important;
	padding: .5rem 1.1rem !important;
}

.btn.backColor:hover{
	filter: brightness(1.1) !important;
	color: #ffffff !important;
}

.btn.bg-indigo, .btn.bg-blue{
	background-color: var(--mega-azul) !important;
	border-color: var(--mega-azul) !important;
	color: #fff !important;
}

.btn.bg-indigo:hover, .btn.bg-blue:hover{
	filter: brightness(1.12) !important;
}

.btn.bg-teal{
	background-color: var(--mega-verde) !important;
	border-color: var(--mega-verde) !important;
	color: #fff !important;
}

.btn.bg-teal:hover{
	filter: brightness(1.1) !important;
}

.btn.bg-maroon{
	background-color: var(--mega-rojo) !important;
	border-color: var(--mega-rojo) !important;
	color: #fff !important;
}

.btn.bg-maroon:hover{
	filter: brightness(1.1) !important;
}

.btn.bg-purple{
	background-color: #5B4FE0 !important;
	border-color: #5B4FE0 !important;
	color: #fff !important;
}

#daterange-btn{
	background: var(--mega-gris-claro) !important;
	border: 1px solid var(--mega-gris-borde) !important;
	border-radius: 999px !important;
	color: var(--mega-texto) !important;
	padding: .4rem .9rem !important;
}

.myModule, .deleteModule{
	color: var(--mega-gris) !important;
}

.myModule:hover{ color: var(--mega-azul) !important; }
.deleteModule:hover{ color: var(--mega-rojo) !important; }


.actions_buttons{
    
    background-color: var(--mega-gris-claro);
    
}



.mega-table .btn.text-primary,
.mega-table a.btn.text-primary{ color: var(--mega-azul) !important; }

.mega-table .btn.text-maroon,
.mega-table .deleteItem{ color: var(--mega-rojo) !important; }

.mega-table .btn.text-success,
.mega-table .openFacturaModal{ color: var(--mega-verde) !important; }

.mega-table .btn.text-teal{ color: var(--mega-verde) !important; }

.mega-table .btn.text-indigo{ color: var(--mega-azul) !important; }

.mega-table .btn.text-dark{ color: var(--mega-texto) !important; }

.mega-table td .btn{
	
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	font-size: .95rem !important;
}

.mega-table td .btn:not(:disabled):hover{
	background: var(--mega-gris-claro) !important;
}


.table-responsive{
	border-radius: var(--mega-radius-sm) !important;
}

table.mega-table{
	font-family: var(--mega-font-body) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

table.mega-table thead th{
	background: var(--mega-gris-claro) !important;
	color: var(--mega-azul-oscuro) !important;
	font-family: var(--mega-font-title) !important;
	font-weight: 700 !important;
	font-size: .72rem !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	border: none !important;
	border-bottom: 2px solid var(--mega-azul) !important;
	padding: .85rem .75rem !important;
	white-space: nowrap !important;
}

table.mega-table thead th .orderFilter{
	color: var(--mega-gris) !important;
	right: 4px !important;
}

table.mega-table thead th.columnHeader:hover{
	color: var(--mega-azul) !important;
	cursor: pointer !important;
}

table.mega-table tbody#loadTable td{
	padding: .75rem;
	vertical-align: middle !important;
	border-bottom: 1px solid var(--mega-gris-borde) !important;
	color: var(--mega-texto) !important;
	font-size: .85rem !important;
}

table.mega-table tbody#loadTable tr{
	transition: background-color .12s ease !important;
}

table.mega-table tbody#loadTable tr:hover{
	background-color: var(--mega-azul-suave) !important;
}

table.mega-table tbody#loadTable tr:last-child td{
	border-bottom: none !important;
}

table.mega-table tbody#loadTable td.text-center.py-3{
	color: var(--mega-gris) !important;
	font-style: italic !important;
}


.mega-table .badge{
	font-family: var(--mega-font-title) !important;
	font-weight: 600 !important;
	font-size: .68rem !important;
	letter-spacing: .02em !important;
	border-radius: 999px !important;
	border: none !important;
	padding: .35rem .7rem !important;
}

.mega-table .badge.bg-dark{ background: var(--mega-texto) !important; }
.mega-table .badge.bg-indigo{ background: var(--mega-azul) !important; color:#fff; }
.mega-table .badge.bg-teal{ background: var(--mega-verde) !important; color:#fff; }
.mega-table .badge.bg-maroon{ background: var(--mega-rojo) !important; color:#fff; }


td[data-column*="pago"],
td[data-column*="estado"]{
	font-weight: 600 !important;
}

td[data-column*="pago"]:empty,
td[data-column*="estado"]:empty{
	font-weight: 400 !important;
}






.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.status-pill[data-status="pendiente"] {
    background: var(--mega-rojo-suave); color: var(--mega-rojo); 
}

.status-pill[data-status="en-proceso"] {
   background: var(--mega-amarillo-suave); color: #8a7d00;
    
}

.status-pill[data-status="pagado"] {
    background: var(--mega-verde-suave); color: var(--mega-verde);
}



.form-check-input.checkItem,
.form-check-input.changeBoolean,
.form-check-input{
	border-color: var(--mega-gris) !important;
}

.form-check-input:checked{
	background-color: var(--mega-azul) !important;
	border-color: var(--mega-azul) !important;
}

.form-switch .form-check-input:checked{
	background-color: var(--mega-verde) !important;
	border-color: var(--mega-verde) !important;
}

#searchItem,
.form-control,
.form-select{
	border-radius: var(--mega-radius-sm) !important;
	border: 1px solid var(--mega-gris-borde) !important;
	font-size: .85rem !important;
}

#searchItem:focus,
.form-control:focus,
.form-select:focus{
	border-color: var(--mega-azul) !important;
	box-shadow: 0 0 0 3px var(--mega-azul-suave) !important;
}

.changeLimit{
	background-color: #fff !important;
}

#manageColumns{
	border-radius: 999px !important;
	border-color: var(--mega-gris-borde) !important;
	color: var(--mega-texto) !important;
	font-weight: 600 !important;
}

#manageColumns:hover{
	border-color: var(--mega-azul) !important;
	color: var(--mega-azul) !important;
}

#columnMenu{
	border-radius: var(--mega-radius-sm) !important;
	border: 1px solid var(--mega-gris-borde) !important;
	box-shadow: var(--mega-shadow) !important;
	min-width: 220px !important;
}

#columnMenu .form-check{
	margin-bottom: .35rem !important;
}

#showAllColumns{
	background-color: var(--mega-azul) !important;
	border-color: var(--mega-azul) !important;
	border-radius: 999px !important;
}


.blockFooter small{
	color: var(--mega-gris) !important;
	font-size: .8rem !important;
}

.pagination .page-link{
	border: 1px solid var(--mega-gris-borde) !important;
	color: var(--mega-azul) !important;
	border-radius: 999px !important;
	margin: 0 3px !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
}

.pagination .page-item.active .page-link{
	background-color: var(--mega-azul) !important;
	border-color: var(--mega-azul) !important;
	color: #fff !important;
}

.pagination .page-link:hover{
	background-color: var(--mega-azul-suave) !important;
	color: var(--mega-azul) !important;
}


#facturaMesesModal .modal-content{
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 40px rgba(45, 39, 156, 0.18) !important;
	overflow: hidden !important;
}

#facturaMesesModal .modal-header{
	background: var(--mega-azul) !important;
	border-bottom: none !important;
	padding: 1.1rem 1.4rem !important;
}

#facturaMesesModal .modal-title{
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
}

#facturaMesesModal .modal-title #facturaClienteNombre{
	font-weight: 800 !important;
}

#facturaMesesModal .btn-close{
	filter: brightness(0) invert(1) !important;
	opacity: .85 !important;
}

#facturaMesesModal .btn-close:hover{
	opacity: 1 !important;
}

#facturaMesesModal .modal-body{
	padding: 1.4rem !important;
	font-family: var(--mega-font-body) !important;
}

#facturaMesesModal .modal-body p.text-muted{
	color: var(--mega-gris) !important;
}

#facturaMesesList{
	max-height: 260px !important;
	overflow-y: auto !important;
	padding-right: .25rem !important;
}

#facturaMesesList .form-check{
	padding: .55rem .5rem .55rem 2.25rem !important;
	border-radius: var(--mega-radius-sm) !important;
	margin-bottom: .3rem !important;
	transition: background-color .12s ease !important;
}

#facturaMesesList .form-check:hover{
	background-color: var(--mega-gris-claro) !important;
}

#facturaMesesList .form-check-input:checked{
	background-color: var(--mega-verde) !important;
	border-color: var(--mega-verde) !important;
}

#facturaMesesList .form-check-label{
	font-size: .88rem !important;
}

#facturaMesesModal .modal-body > .d-flex.border-top{
	border-top: 2px solid var(--mega-gris-borde) !important;
	padding-top: .9rem !important;
	margin-top: .5rem !important;
}

#facturaMesesModal .modal-body > .d-flex.border-top strong{
	font-family: var(--mega-font-title) !important;
}

#facturaMesesTotal{
	color: var(--mega-azul) !important;
	font-size: 1.15rem !important;
}

#facturaMesesModal .modal-footer{
	border-top: 1px solid var(--mega-gris-borde) !important;
	padding: 1rem 1.4rem !important;
}

#facturaMesesModal .modal-footer .btn-secondary{
	background: #ffffff !important;
	border: 1px solid var(--mega-gris-borde) !important;
	color: var(--mega-texto) !important;
	border-radius: 999px !important;
}

#facturaMesesModal .modal-footer .btn-secondary:hover{
	background: var(--mega-gris-claro) !important;
}

#facturaMesesModal #facturaMesesGenerar{
	background-color: var(--mega-verde) !important;
	border-color: var(--mega-verde) !important;
	border-radius: 999px !important;
	padding: .5rem 1.2rem !important;
}

#facturaMesesModal #facturaMesesGenerar:hover{
	filter: brightness(1.08) !important;
}



#viewDetailsModal{
    align-content:center;
}


@media (max-width: 992px){

	#cardTable .card-header,
	#cardTable .card-body{
		padding: 1rem !important;
	}

	table.mega-table thead th,
	table.mega-table tbody#loadTable td{
		font-size: .78rem !important;
		padding: .6rem !important;
	}

}



