body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: 24px;
    font-weight: 700;
}
h2 {
    font-size: 22px;
    font-weight: 700;
}
h3 {
    font-size: 20px;
    font-weight: 600;
}
h4 {
    font-size: 18px;
    font-weight: 500;
}
h5 {
    font-size: 16px;
    font-weight: 400;
}
h6 {
    font-size: 14px;
    font-weight: 400;
}


/* Aplicar Montserrat al placeholder del input */
input::placeholder {
  font-family: 'Montserrat', sans-serif;
}

p {
  font-family: 'Montserrat', sans-serif;
}

a {
    text-decoration: none;
    color: #A591FF;
}

.espacio20 {
  height: 20px;
}

.espacio50 {
  height: 50px;
}

.espacio100 {
  height: 100px;
}

.boton {
  background-color: #4b3c8c;
  border: none;
}

.botones {
  background: #4b3c8c;
  color: white;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  padding: 5px 30px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Efecto de sombra */
  transform: translateZ(0); /* Hace que el botón parezca estar por encima de la pantalla */
}

.botones:hover {
  background: #4b3c8c;
  transform: scale(1.05); /* Cambio de escala al hacer hover */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); /* Cambio de sombra al hacer hover */
  text-decoration: none;
  color: white;
}

.btn-limpiar {
  background: #4b3c8c;
  color: white;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  padding: 5px 30px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Efecto de sombra */
  transform: translateZ(0); /* Hace que el botón parezca estar por encima de la pantalla */
}

.btn-limpiar:hover {
  transform: scale(1.05); /* Cambio de escala al hacer hover */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); /* Cambio de sombra al hacer hover */
  text-decoration: none;
  color: white;
}

.labelpill {
  background-color: #4b3c8c;
  color: white;
  padding: 0.3rem;
  padding-left: 2%;
  padding-right: 2%;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.labelpill2 {
  background-color: #4b3c8c;
  color: white;
  padding: 0.3rem;
  padding-left: 2%;
  padding-right: 2%;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  
}

.labelpillizquierda {
  background-color: #4b3c8c;
  border: none;
  color: white;
  padding: 0.7rem;
  padding-left: 2%;
  padding-right: 2%;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 3px;
}

.labelpillderecha {
  background-color: #4b3c8c;
  border: none;
  color: white;
  padding: 0.7rem;
  padding-left: 2%;
  padding-right: 2%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 3px;
}

.searchpill {
  display: block;
  width: 100%;
  padding: 0.5rem;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#resultsTable {
  background-color: #fff; /* Cambia el color de fondo de la tabla */
  
}

#resultsTable tr:nth-child(odd) {
  background-color: #fff; /* Cambia el color de fondo de las filas impares */
}

#resultsTable tr:nth-child(even) {
  background-color: #fff; /* Cambia el color de fondo de las filas pares */
}

#resultsTable th {
  background-color: #4b3c8c; /* Cambia el color de fondo de las celdas de encabezado */
  color: white; /* Cambia el color del texto en las celdas de encabezado */
  font-size: 14px;
  text-align: center;
  padding: 0.3rem;
  border-radius: 3px;
}

#resultsTable tr {
  color: white; /* Cambia el color del texto en las celdas de encabezado */
  font-size: 12px;
  font-weight: 400;
}

#resultsTable tr:hover {
  background-color: #FFF2D7; /* Cambia el color de fondo de las filas al pasar el cursor */
}

/* Mueve el control 'info' a la parte superior izquierda de la tabla */
.dataTables_info {
  float: left;
}

/* Mueve el control 'lengthMenu' a la parte superior derecha de la tabla */
.dataTables_length {
  float: right;
}

        /* Personaliza el color de los números en los botones de paginación */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #4b3c8c !important; /* Cambia este color al que prefieras */
        }
        /* Personaliza el color de los números en el botón de paginación activo */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #4b3c8c !important; /* Cambia el color de fondo del botón activo */
            color: white !important; /* Cambia el color del texto del botón activo */
        }
        /* Personaliza el color de los números en el botón de paginación cuando se pasa el ratón por encima */
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #4b3c8c !important; /* Cambia el color de fondo al pasar el ratón */
            color: white !important; /* Cambia el color del texto al pasar el ratón */
        }

/**--------------- estilos -------------------------**/

.ocultar-label {
  display: none;
}

.contenedor {
  width: 95%; /* Establece el ancho al 90% del ancho de la ventana */
  max-width: none; /* Asegura que no haya un ancho máximo */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
}

    .contenedor-md {
        width: 100%; /* Establece el ancho al 100% del ancho de la ventana */
        max-width: none; /* Asegura que no haya un ancho máximo */
        margin: 0 auto; /* Centra el contenedor horizontalmente */
        padding: 0 15px; /* Añade padding a los lados para un pequeño margen interno */
    }
    @media (max-width: 767.98px) {
        .contenedor-md .d-flex {
            flex-direction: column;
            align-items: flex-start;
        }
        .contenedor-md .d-flex .searchpill,
        .contenedor-md .d-flex .boton {
            width: 100%;
            margin: 5px 0;
        }
    }    

.contenedor-sm {
  width: 50%; /* Establece el ancho al 90% del ancho de la ventana */
  max-width: none; /* Asegura que no haya un ancho máximo */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.espacio30 {
  height: 30px;
}

.espacio70 {
  height: 70px;
}

.espaciofooterbuscador {
  min-height: 15rem; /* Ajusta el valor según el espacio que desees entre el contenido y el footer */
}

.columnafiltros {
  background-color: #0D448C;
  /* Otros estilos opcionales */
  color: #fff; /* Cambiar el color del texto para que sea legible en el fondo */
  padding: 10px; /* Agregar relleno para espaciar el contenido */
  border-radius: 3px;
  min-height: 100px;
}

.columnaestadisticas {
  background-color: #266297;
  /* Otros estilos opcionales */
  color: #fff; /* Cambiar el color del texto para que sea legible en el fondo */
  padding: 10px; /* Agregar relleno para espaciar el contenido */
  border-radius: 30px;
}

#accordionSidebar {
  background-color: #3366cc;
}

.highlight {
    background-color: yellow;
}

.badge {
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    display: inline-block;
}

.badge-warning {
    color: #856404;
    background-color: #ffeeba;
}

.badge-success {
    color: #155724;
    background-color: #d4edda;
}

.chart-container {
    position: relative;
    height: 400px; /* Set a fixed height for all charts */
    width: 100%;
}

.chart-container {
    position: relative;
    height: 400px; /* Set a fixed height for all charts */
    width: 100%;
}

canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Define los estilos en un archivo CSS */
.col-vigencia {
    width: 10%;
}

.col-fechaemision {
    width: 15%;
}

.col-titulo {
    width: 20%;
}

.col-descripcion {
    width: 25%;
}

.col-procesosgd {
    width: 15%;
}

.col-palabrasclave {
    width: 10%;
}

.col-archivopdf {
    width: 5%;
}