:root{
  --mega-azul:      #2D279C;
  --mega-azul-dark: #201d70;
  --mega-rojo:      #EA1C24;
  --mega-amarillo:  #FDF100;
  --mega-verde:     #00B150;
  --mega-gris:      #8E8D8F;
  --mega-bg:        #F0F0F5;
}

body{
  font-family: 'Open Sans', sans-serif;
  background: var(--mega-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.sidebar-heading, .btn, .navbar-brand, .card-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}


.bg-primary{ background: var(--mega-azul) !important; color:#fff !important; }
.text-primary{ color: var(--mega-azul) !important; }
.bg-transparent-primary{
  background: rgba(45,39,156,.12) !important;
  color: var(--mega-azul) !important;
  border: 1px solid var(--mega-azul) !important;
}

.bg-danger{ background: var(--mega-rojo) !important; color:#fff !important; }
.text-danger{ color: var(--mega-rojo) !important; }
.bg-transparent-danger{
  background: rgba(234,28,36,.12) !important;
  color: var(--mega-rojo) !important;
  border: 1px solid var(--mega-rojo) !important;
}

.bg-success{ background: var(--mega-verde) !important; color:#fff !important; }
.text-success{ color: var(--mega-verde) !important; }
.bg-transparent-success{
  background: rgba(0,177,80,.12) !important;
  color: var(--mega-verde) !important;
  border: 1px solid var(--mega-verde) !important;
}

.bg-warning{ background: var(--mega-amarillo) !important; color:#3a3600 !important; }
.text-warning{ color: #b8ae00 !important; }
.bg-transparent-warning{
  background: rgba(253,241,0,.18) !important;
  color: #8c8500 !important;
  border: 1px solid var(--mega-amarillo) !important;
}

.bg-gray, .text-muted{ color: var(--mega-gris) !important; }
.bg-gray{ background: var(--mega-gris) !important; color:#fff !important; }

.bg-blue{ background: var(--mega-azul) !important; color:#fff !important; }
.text-blue{ color: var(--mega-azul) !important; }


.backColor{
  background: var(--mega-azul) !important;
  color:#fff !important;
  border: none !important;
}
.backColor small, .backColor h6, .backColor span{ color:#fff !important; }


.btn-default.backColor,
.btn-default.bg-primary{
  border-radius: 8px !important;
}


#sidebar-wrapper{
  background: var(--mega-azul-dark) !important;
}

#sidebar-wrapper .sidebar-heading{
  color:#fff;
}

#sidebar-wrapper .list-group-item{
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
}

#sidebar-wrapper .list-group-item:hover{
  background: rgba(255,255,255,.08) !important;
  color:#fff !important;
}

#sidebar-wrapper .list-group-item.active{
  background: var(--mega-verde) !important;
  color:#fff !important;
  border-radius: 8px;
}


.card, #cardTable{
  border-radius: 12px !important;
  border: 1px solid #e3e3ec !important;
}

.card .display-6, .card h2, .card h3{
  font-family: 'Montserrat', sans-serif;
}


.badge-pagado{ background: var(--mega-verde) !important; color:#fff !important; }
.badge-vencido{ background: var(--mega-rojo) !important; color:#fff !important; }
.badge-pendiente{ background: var(--mega-amarillo) !important; color:#3a3600 !important; }
.badge-en-proceso{ background: var(--mega-amarillo) !important; color:#3a3600 !important; }

// 7. INPUTS / BUSCADOR

.form-control:focus, .form-select:focus{
  border-color: var(--mega-azul) !important;
  box-shadow: 0 0 0 .15rem rgba(45,39,156,.15) !important;
}


.btnPages{
    position: relative;
    display: flex;
    align-items: center;
    gap: .4rem;

    padding: 6px 10px;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.14)
    );

    border: none !important;
    border-radius: 14px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 6px 18px rgba(0,0,0,.14);