.cardstextkpi {
    font-size: clamp(0.5rem, 1rem + 3vw, 1.3rem);
    letter-spacing: -1px;
    /* white-space: nowrap; */
}

.scroll {
  overflow-y: scroll !important;
}

.hg150 {
  height: 150px !important;
}

.border-primary-active {
  border-color: #fe123a !important;  /* Rojo vibrante para bordes activos */
  border-width: 3px !important;  
}

.border-primary:hover {
  border-color: #78bae7 !important;  /* Azul cielo para hover */
  border-width: 3px !important;  
}

.dataTable-top {
  padding-top: 0px !important;
}

.dataTable-bottom {
  padding-bottom: 0px !important;
}

.nav.nav-pills .nav-link.active {
  background-color: #001080 !important;  /* Azul marino para elementos activos */
  color: white !important;
}

/* Colores complementarios */
.bg_color_skyblue { background-color: #78bae7 !important; }  /* Azul cielo */
.bg_color_orange { background-color: #fe9a3e !important; }    /* Naranja complementario */
.bg_colorf53794 { background-color: #fe123a !important; }    /* Rojo vibrante */
.bg_color537bc4 { background-color: #4a6baf !important; }     /* Azul intermedio */
.bg_coloracc236 { background-color: #00c9a7 !important; }    /* Verde turquesa */
.bg_color166a8f { background-color: #001080 !important; }    /* Azul marino */
.bg_color00a950 { background-color: #e1f5fe !important; }    /* Azul claro pastel */
.bg_color58595b { background-color: #f5f7fa !important; }    /* Gris claro */
.bg_colore91e63 { background-color: #ff8a9e !important; }   /* Rosa suave */

.cs_bg {
  background-color: #001080 !important;  /* Azul marino principal */
}

.card_statics1 {
  border-color: #001080 !important;
  border-width: 1px !important;
}

.card_statics {
  border-color: #78bae7 !important;      /* Azul cielo para bordes */
  border-width: 1px !important;
  background-color: #f5f7fa !important;  /* Fondo gris claro */
}

.rowNoPadding {
  padding: 0px !important;
}

.bgpdl {
  background-color: #001080 !important;  /* Azul marino */
}

.pdl1 {
  color: #001080 !important;             /* Azul marino */
}

.btn-primary-pdl {
  color: white !important;
  background-color: #fe123a !important;  /* Rojo vibrante para botones */
}

.btn-primary-pdl:hover {
  color: white !important;
  background-color: #ff4d6d !important;  /* Rojo más claro al hover */
  border-color: #ff4d6d !important;
  box-shadow: 0 14px 26px -12px rgba(254, 18, 58, 0.4), 
              0 4px 23px 0 rgba(254, 18, 58, 0.15), 
              0 8px 10px -5px rgba(254, 18, 58, 0.2);
}

.pdl2 {
  color: #4a4a4a !important;             /* Gris oscuro */
}

.pdl3 {
  color: #78bae7 !important;             /* Azul cielo */
}

.pdl4 {
  color: #fe123a !important;             /* Rojo vibrante */
}

.pdlbg4 {
  background-color: #fe123a !important;  /* Rojo vibrante */
}

.dataTable-wrapper .dataTable-bottom .dataTable-pagination .dataTable-pagination-list .active a {
  background-image: linear-gradient(195deg, #001080, #78bae7);  /* Degradado azul */
}

.dataTable-wrapper .dataTable-bottom .dataTable-pagination .dataTable-pagination-list .active a:hover {
  background-image: linear-gradient(195deg, #001080, #78bae7);
}

.subpdl1 {
  color: #ffb347 !important;             /* Naranja claro */
}

.subpdlbg1 {
  background-color: #ffb347 !important;
}

.cardbordersubpdlbg1 {
  border-width: 2px !important;
  border-color: #fe123a !important;     /* Rojo vibrante */
}

.subpdl2 {
  color: #e1f5fe !important;             /* Azul claro pastel */
}

.subpdl3 {
  color: #001080 !important;             /* Azul marino */
}

.subpdlbg3 {
  background-color: #001080 !important;  /* Azul marino */
}

.subpdl4 {
  color: #78bae7 !important;             /* Azul cielo */
}

.colorWhite {
  color: white !important;
}

.bordercolorWhite {  
  border: 2px solid white !important;
}

/* Sobrescritura de colores principales de Bootstrap */
:root {
  --bs-primary: #001080;       /* Azul marino (reemplaza azul original) */
  --bs-secondary: #78bae7;     /* Azul cielo (reemplaza gris) */
  --bs-success: #00c9a7;       /* Verde turquesa */
  --bs-info: #4a6baf;          /* Azul intermedio */
  --bs-warning: #ffb347;       /* Naranja claro */
  --bs-danger: #fe123a;        /* Rojo vibrante */
  --bs-light: #f5f7fa;         /* Gris claro */
  --bs-dark: #001080;          /* Azul marino (oscuro) */
}

/* Sobrescritura de colores de texto */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-info { color: var(--bs-info) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* Sobrescritura de fondos */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }

/* Sobrescritura de bordes */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-success) !important; }
.border-info { border-color: var(--bs-info) !important; }
.border-warning { border-color: var(--bs-warning) !important; }
.border-danger { border-color: var(--bs-danger) !important; }
.border-light { border-color: var(--bs-light) !important; }
.border-dark { border-color: var(--bs-dark) !important; }

/* Sobrescritura de botones */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: #000d6e;
  border-color: #000d6e;
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-secondary:hover {
  background-color: #5ca8e0;
  border-color: #5ca8e0;
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn-danger:hover {
  background-color: #e01033;
  border-color: #e01033;
}

/* Sobrescritura de alerts */
.alert-primary {
  color: #002083;
  background-color: #d6e2ff;
  border-color: #b8caff;
}

.alert-secondary {
  color: #3a6b8c;
  background-color: #e1f0fa;
  border-color: #cde6ff;
}

.alert-danger {
  color: #b80f2e;
  background-color: #ffdfe4;
  border-color: #ffc4cd;
}

/* Sobrescritura de badges */
.badge.bg-primary { background-color: var(--bs-primary) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; }
.badge.bg-danger { background-color: var(--bs-danger) !important; }

/* Sobrescritura de links */
a { color: var(--bs-primary); }
a:hover { color: #000d6e; }

/* Sobrescritura de paginación */
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.page-link {
  color: var(--bs-primary);
}
.page-link:hover {
  color: #000d6e;
}

.img-header {
      margin: 0;
      padding: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 250px;
}

@media (max-width: 767px) {
    .img-header {
        background-size: contain;
        background-position: top;
        background-repeat: repeat;
        min-height: 250px;
    }
}

.mw-1500 {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-image {
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    display: block;
    max-height: 50vh;
}

.banner-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}