:root {
  --cgp-bg-color: #f8f8f8;
  --cgp-heading-color: #000;
  --cgpg-body-color: #495057;
  --cgp-body-font-family: "Inter","Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --cgp-body-font-size: 0.875rem;
  --cgp-body-font-weight: 400;
  --cgp-body-line-height: 1.5;
}
body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  color: var(--cgp-body-color);
  font-family: var(--cgp-body-font-family);
  font-weight: var(--cgp-body-font-weight);
  line-height: var(--cgp-body-line-height);
  margin: 0;
}


.custom-header {
  /*background: linear-gradient(to right, #4e54c8, #8f94fb); */
  background: url(../img/bannerbg.jpg) center center no-repeat;
  background-size: cover;
  min-height: 250px; /* Altura mínima del header */
}

.gradient-before {
  position: relative;
}

.gradient-before::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #f1f5f9, #f9fafb);
  z-index: -1;
}


.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
  color: var(--cgp-heading-color);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: .5rem;
  margin-top: 0
}

.h1,h1 {
  font-size: 1.75rem
}

.h2,h2 {
  font-size: 1.53125rem
}

.h3,h3 {
  font-size: 1.3125rem
}

.h4,h4 {
  font-size: 1.09375rem
}

.h5,.h6,h5,h6 {
  font-size: .875rem
}

p {
  margin-bottom: 1rem;
  margin-top: 0
}
  


@media (min-width: 992px) {

  .content {
    padding: 3rem 3rem 1.5rem;
  }

}
@media (min-width: 768px) {
  .content {
      max-width: auto;
      width: auto;
  }
}

.card {
  margin-bottom: 24px;
  box-shadow: 0 3px 5px #0000000b;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  position: relative;
}

.box--stacked:before {
  content: "";
  z-index: -1;
  box-shadow: 0 1px 2px #0000000d;
  height: 100%;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  position: absolute;
  border-radius: 0.5rem;
  left: 0.875rem;
  right: 0.875rem;
  top: 0;
  margin-top: 0.75rem;
}

.border-dashed {
  border-style: dashed !important;
  border-color: #cbd5e1cc !important; 
  border-radius: 0.6rem !important
}


/* Datatable */

table.dataTable thead th {
  border-top: 1px solid #cbd5e1cc !important;
  border-bottom: 1px solid #cbd5e1cc !important; 
  background-color: rgb(248 250 252);
  font-size: 14px;
  color: rgb(71, 85, 105);
}

table.dataTable td {
  border-bottom: 1px dashed #cbd5e1cc !important; 
  font-size: 14px;
  color: rgb(71, 85, 105);
  padding: 1.5rem 1.5rem 1.5rem 0rem;

}

table.dataTable td.title-table {
  color: rgb(3, 4, 94) !important;
}

table.dataTable td.dt-type-date {
  text-align: center;
}

table.dataTable th.dt-type-date {
  text-align: left;
}


.dt-info {
  font-size: 14px;
  color: rgb(71, 85, 105);
  letter-spacing: 0.35px;
}

div.dt-container div.dt-paging ul.pagination {
  margin: 16px 0;
  font-size: 14px;
}

.page-link {

  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-right: 0.5rem;
  color: rgb(30 41 59)
}

.dataTables_filter {
  display: none;
}


#searchContainer .dataTables_filter {
  margin: 0; 
}

#searchContainer input {
  width: auto;
  margin-left: 10px; 
}


#searchContainer {
  position: relative;
}

#searchContainer::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgb(71, 85, 105)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>');
  position: absolute;
  left: 18px;
  top: 55%;
  transform: translateY(-50%);
  pointer-events: none; /* Asegura que el icono no interfiera con la interacción del usuario */
}

#customSearchBox {
  padding-left: 40px; /* Asegura que el texto no se sobreponga al icono */
}




/* date picker */


input#monthYearPicker[readonly] {

  background-color: #fff !important;

}

.form-control {
  border-color: #cbd5e199;
  border-radius: 5px;
  font-size:14px;
  color: rgb(71, 85,105) !important;
}

.datepicker-wrapper {
  position: relative;
  display: inline-block;
}

.datepicker-wrapper::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgb(71, 85, 105)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect><line x1="16" x2="16" y1="2" y2="6"></line><line x1="8" x2="8" y1="2" y2="6"></line><line x1="3" x2="21" y1="10" y2="10"></line></svg>');
  position: absolute;
  left: 12px; 
  top: 44%;
  transform: translateY(-50%);
  z-index: 10;
  width: 16px !important; 
  height: 16px !important; 
  pointer-events: none; 
  color:rgb(71, 85, 105);
}

.flatpickr-input {
  padding-left: 2.5rem; 
  
}

#temasContainer, #palabrasContainer {
  font-size: 14px;
  margin-left: 1rem;

}

#temasContainer p {
  top: 0.5rem;
}