:root {
  --color-base-secondary-001-c-41: #001c41;
  --color-base-tertiary-e-22-c-2-c: #e22c2c;
  --color-base-inblack-primary-20: #031527;
  --color-base-inblack-primary-40: #062a4e;
  --color-base-inblack-primary-60: #D14A4A;
  --color-base-inblack-primary-80: #0c549c;
  --color-base-inblack-primary-100: #CB8DB7;
  --color-base-inblack-secundary-20: #00050d;
  --color-base-inblack-secundary-40: #000b1a;
  --color-base-inblack-secundary-60: #001027;
  --color-base-inblack-secundary-80: #001634;
  --color-base-inblack-tertiary-20: #2d0808;
  --color-base-inblack-tertiary-40: #5a1111;
  --color-base-inblack-tertiary-60: #871a1a;
  --color-base-inblack-tertiary-80: #b42323;
  --color-base-inwhite-primary-80: #3f87d0;
  --color-base-inwhite-primary-60: #6fa5dc;
  --color-base-inwhite-primary-40: #9fc3e7;
  --color-base-inwhite-primary-20: #cfe1f3;
  --color-base-inwhite-secundary-80: #334967;
  --color-base-inwhite-secundary-60: #66778d;
  --color-base-inwhite-secundary-40: #99a4b3;
  --color-base-inwhite-secundary-20: #ccd2d9;
  --color-base-inwhite-tertiary-60: #ee8080;
  --color-base-inwhite-tertiary-40: #f3abab;
  --color-base-inwhite-tertiary-20: #f9d5d5;
  --color-gray-373737: #373737;
  --color-base-inwhite-tertiary-80: #e85656;
  --color-gray-656565: #656565;
  --color-gray-bbbbbb: #bbb;
  --color-gray-eeeeee: #eee;
  --color-gray-f-8-f-8-f-8: #f8f8f8;
  --color-gray-ffffff: #fff;
  --color-alert-cl-color-danger: #f56b0f;
  --color-alert-cl-color-warning: #e22c2c;
  --color-alert-cl-color-info: #cfe1f3;
  --color-alert-cl-color-success: #018484;
  --color-white: #fff;
  --color-gray-656565: #656565;
  --black-inactive: rgba(0, 0, 0, 0.54);
  --color-gray-373737: #373737;
  --color-alert-cl-color-danger: #f56b0f;
  --color-alert-cl-color-success: #00ada2;
  --color-gray-ffffff: #fff;
  --color-alert-cl-border-color-danger: #f56b0f;
  --color-green-title: #3893AD;
  --color-blue-varios: #0F69C4;
  --color-red-ptrac: #D14A4A;
}

@font-face {
  font-family: RobotoSlab;
  src: local(RobotoSlab-Light),
    url(/path/to/RobotoSlab-Light.woff2) format("woff2"),
    url(/path/to/RobotoSlab-Light.woff) format("woff"),
    url(/path/to/RobotoSlab-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: RobotoSlab;
  src: local(RobotoSlab-Bold),
    url(/path/to/RobotoSlab-Bold.woff2) format("woff2"),
    url(/path/to/RobotoSlab-Bold.woff) format("woff"),
    url(/path/to/RobotoSlab-Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
}
.titleh1l-bold-sans-serif {
  font-family: Roboto;
  font-size: 49px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh1l-bold-serif {
  font-family: RobotoSlab;
  font-size: 49px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh1l-light-serif {
  font-family: RobotoSlab;
  font-size: 49px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh2l-bold-serif {
  font-family: RobotoSlab;
  font-size: 39px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: normal;
}
.titleh2l-medium-sans-serif {
  font-family: Roboto;
  font-size: 39px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh2l-light-serif {
  font-family: RobotoSlab;
  font-size: 39px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: normal;
}
.titleh3l-bold-serif {
  font-family: RobotoSlab;
  font-size: 31.3px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh3l-medium-sans-serif {
  font-family: Roboto;
  font-size: 31.3px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh4l-bold-serif {
  font-family: RobotoSlab;
  font-size: 25px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.titleh4l-medium-sans-serif {
  font-family: Roboto;
  font-size: 25px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
}
.p-black-l-left-middle {
  font-family: Roboto;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
}
.bodylinkl-regular-sans-serif {
  font-family: Roboto;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
}
.titleh5l-medium-sans-serif {
  font-family: Roboto;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
}
.bodypm-regular-sans-serif {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
}
.bodypl-regular-sans-serif {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
}

.bodylinkm-regular-sans-serif {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
}

.navegation {
  display: flex;
  justify-content: center;
  margin: 40px;
}

.breadcrumb-back{
  color: #1976d2;
}

.breadcrumb-instance{
  color: rgba(0, 0, 0, 0.38);
}

.text-white{
    color: var(--color-red-ptrac);
}

.btn-cerrar-sesion{
    color: #871a1a;
    border-color: #871a1a;
}

.btn-cerrar-sesion:hover {
  background-color: #871a1a;
  color: #ffffff;
}

.errorlist {
    color: red;
    list-style-type: none;
    margin-left: -40px;
    font-size: 14px;
}

.errorlist__item {
    margin-bottom: 0px;
}

#confirmation-message {
  margin-top: 10px;
  padding: 10px;
  background-color: green;
  color: white;
}

.hidden {
    display: none;
}

/* tooltip */
.custom-tooltip .tooltip-inner {
  background-color: #007bff; 
  color: #fff; 
}

.asesores-nombre-font {
  font-family: Roboto;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.asesores-region-font {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.bajada-titulo-font {
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  color: #373737;
}
.titulo-green-font {
  font-family: "Roboto Slab";
  font-size: 49px;
  font-style: normal;
  font-weight: 700;
  line-height: 61.04px;
  color: #3893AD;
}
/* Cambia el tamaño de la fuente en pantallas pequeñas (mobile) */
@media (max-width: 768px) {
  .titulo-green-font {
      font-size: 32px;
      font-weight: 400;
      line-height: 35px;
  }
}
.epigrafe-font {
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  color:#373737;
}
/* Estilos para pantallas más grandes */
.icono_dimension {
  height: 60px; 
  width: 60px;
}
/* Estilos para pantallas móviles */
@media (max-width: 768px) {
  .row.align-items-center {
      display: flex;
      flex-wrap: nowrap;
  }
  .icono_dimension {
      height: 35px;
      width: 35px;
  }
}
.card_dim_layout {
  display: flex;
  padding: var(--spacing-s, 16px) var(--spacing-m, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs, 8px);
  flex: 1 0 0;
}
.card_dim_administrativa {
  border-radius: 0px 16px 16px 0px;
  border-top: 1px solid #DF6E77;
  border-right: 1px solid #DF6E77;
  border-bottom: 1px solid #DF6E77;
  border-left: 11px solid #DF6E77;
  background-color: var(--Blanco-Base, #FFF);
}
.card_dim_politica {
  border-radius: 0px 16px 16px 0px;
  border-top: 1px solid #715385;
  border-right: 1px solid #715385;
  border-bottom: 1px solid #715385;
  border-left: 11px solid #715385;
  background-color: var(--Blanco-Base, #FFF);
}
.card_dim_fiscal {
  border-radius: 0px 16px 16px 0px;
  border-top: 1px solid #2981AD;
  border-right: 1px solid #2981AD;
  border-bottom: 1px solid #2981AD;
  border-left: 11px solid #2981AD;
  background-color: var(--Blanco-Base, #FFF);
}
.card_dim_fortalecimiento {
  border-radius: 0px 16px 16px 0px;
  border-top: 1px solid #EDD572;
  border-right: 1px solid #EDD572;
  border-bottom: 1px solid #EDD572;
  border-left: 11px solid #EDD572;
  background-color: var(--Blanco-Base, #FFF);
}
.titulo_dimension {
  color: #000;
  /* title/h4/H4 - Web - Desktop */
  font-family: Roboto;
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: 31px; /* 124% */
}
.titulo_temas_abordados {
  flex: 1 0 0;
  color: #212529;
  font-feature-settings: 'liga' off, 'clig' off;
  /* title/h3/H3 - Web - Desktop */
  font-family: Roboto;
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: 39px; /* 125.806% */
}
.titulo_vistas_auxiliares {
  flex: 1 0 0;
  color: #212529;
  font-feature-settings: 'liga' off, 'clig' off;
  /* title/h2/H2 - Web - Desktop */
  font-family: Roboto;
  font-size: 39px;
  font-style: normal;
  font-weight: 500;
  line-height: 49px; /* 125.641% */
}
.boton_corto_plazo {
  display: flex;
  padding: 4.2px 7.8px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--Primario-Base, #0F69C4);
}
.boton_mediano_plazo {
  display: flex;
  padding: 4.2px 7.8px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-base-inwhite-primary-80, #3F87D0);
}
.boton_largo_plazo {
  display: flex;
  padding: 4.2px 7.8px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border-radius: 4px;
  background: var(--color-base-inwhite-secundary-60, #66778D);
}
.boton_fotos_dr {
  display: flex;
  height: 48px;
  padding: 0px 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  border: 1px solid var(--Primario-Base, #0F69C4);
  color: var(--color-base-primary-0-f-69-c-4, var(--Primario-Base, #0F69C4));
  background-color: white; /* Añadido para fondo blanco */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}

.boton_fotos_dr:hover {
  background-color: var(--Primario-Base, #0F69C4); /* Fondo primario en hover */
  color: white; /* Texto blanco en hover */
}

.boton_fotos_dr .material-symbols-outlined {
  transition: color 0.3s ease; /* Transición suave del ícono */
}

.boton_fotos_dr:hover .material-symbols-outlined {
  color: white; /* Cambiar ícono a blanco en hover */
}
.text-decoration-none {
  text-decoration: none; /* Eliminar subrayado del enlace */
}
.underline-text {
  text-decoration: underline; /* Subrayado solo para el texto */
}

.no-underline {
  text-decoration: none; /* No subrayado para el ícono */
  margin-right: 8px; /* Espaciado entre el ícono y el texto */
}
.titulo_home_secundario {
  color: var(--color-base-inblack-primary-100, #CB8DB7);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  /* title/h1/H1 - Web - Mobile */
  font-family: "Puffin Display Soft" , sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 35px; /* 109.375% */
}
.titulo_home_principal {
  color: var(--color-base-inblack-primary-60, #D14A4A);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  /* title/h1/H1 - Web - Desktop */
  font-family: "Puffin Display Soft" , sans-serif;
  font-size: 49px;
  font-style: normal;
  font-weight: 900;
  line-height: 61.04px; /* 124.571% */
}
.logo-pnud-subdere-hight {
  height: 180px;
}
.logo-colaboradores-hight {
  height: 100px;
  object-fit: contain;
}
.border-radius-buttons {
  border-radius: 30px;
  background-color: var(--Primario-Base, #CB8DB7);
  padding: 10px;
  color: var(--color-white, #fff);
}
.icono-smile {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--Primario-Base, #0F69C4);
}