* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.material-symbols-outlined { /* https://fonts.google.com/icons?hl=es-419 */
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

html {
    --color--black: #000000;
    --color--blue-1: #004884;
    --color--blue-2: #36c;
    --color--blue-3: #e6effd;
    --color--blue-4: #e8f0fb;
    --color--blue-5: #3b76fb;
    --color--blue-6: #3366cc;
    --color--blue-7: #052742;
    --color--blue-8: #0073ff;
    --color--blue-9: #004686;
    --color--blue-10: #1996d0;
    --color--blue-11: #1996d0;
    --color--blue-12: #f5f9ff;
    --color--blue-13: #0072ae;
    --color--gray-1: #4b4b4b;
    --color--gray-2: #bababa;
    --color--gray-3: #f2f2f2;
    --color--gray-4: #f6f8f9; /* Menú institucional */
    --color--gray-5: #7f7f7f;
    --color--gray-6: #333334;
    --color--gray-7: #e2e2e2; /* No se usa */
    --color--gray-8: #e5eefb;
    --color--gray-9: #eee;
    --color--gray-10: #fff;
    --color--gray-11: #333;
    --color--gray-12: #555;
    --color--gray-13: #fcfcfc;
    --color--gray-14: #ddd;
    --color--gray-15: #ccc;
    --color--gray-16: #adadad;
    --color--gray-17: #8c8c8c;
    --color--gray-18: #e6e5e5;
    --color--gray-19: #6b6b6b;
    --color--gray-20: #f9f9f9;
    --color--gray-21: #F5F5F5;
    --color--green-1: #606060;
    --color--green-2: #78be21; /* Color verde página web ICBF - Pantone 368C */
    --color--green-3: #006229; /* Anterior color verde página web ICBF */
    --color--green-4: #71B52F;
	--color--green-puro: #008e65; /* Color de puntos de lista de ministerios verde*/
    --color--red-puro: #f42f63; /* Color de punto de lista de ministerios rojo*/
    --color--igualdad: #d23c78; /* Color sector igualdad */
    --color--red: #a80521;
    --color-hover-busqueda: #00a0c6;
    --color--White-1: rgba(252,252,252,.1);
    --color--yellow-1: #ffffe0;
    --colorAzulBorde: var(--color--blue-3);
    --colorAzulFondo: var(--color--blue-1);
    --colorAzulRey: var(--color--blue-1);
    --colorBlanco: #ffffff;
    --colorGrisBackgroundInput: var(--color--gray-3);
    --colorGrisBackgroundSelect: var(--color--gray-3);
    --colorGrisBorde: var(--color--gray-9);
    --colorGrisFondo: var(--color--gray-4);
    --colorGrisSeparadorOpciones: var(--color--gray-9);
    --colorGrisSombra: rgba(0,0,0,.1);
    --colorGrisTextos: var(--color--gray-12);
    --colorGrisTextosICBF: var(--color--gray-11);
    --colorNegro: var(--color--black);
    --colorNegroTextos: var(--color--gray-12);
    --color--NoSeUsa: #000000;
    --colorOverlay: #000000b3;
    --colorRojoSeparador: var(--color--red);
    --colorRojoTachados: #ec1d24;
    --colorVerdeFondo: var(--color--green-2);
    --colorTextoLinks: var(--color--blue-10);
    --colorTextoLinksHover: var(--color--blue-11);
    /* ********* */
    --colorBlancoBordeBotones: #ffffff;
    --colorBlancoContrast: #1c212f;
    --colorBlancoTextos: #ffffff;
    --colorGrisBordeBotones: #b3b3b3;
    --colorGrisBordeBotonesOpciones: #646464;
    --colorAzul: #36c;
    --colorAzulBackground: #1e92c4;
    --colorAzulCielo: #00aeef;
    --colorAzulClaro: #e6effd;  
    --colorCyan: #e5eefb;
	--colorCyan-2: #008FBD;
    --colorCyanClaro: #5ac1dd;
    --colorGrisClaro: #f1f1f1;
    --colorGrisBordesEspeciales: #ccc;
    --colorGrisClaroAlterno: #dededf; /* Usado en franja-estar-mas-cerca */
    --colorGrisClaroVerdoso: #e6f0fd;
    --colorGrisIconos: #8e8e8e;
    --colorGrisMuyClaro: #f4f4f4;
    --colorGrisMuyClaroAlterno: #e1e1e2; /* #fafbfc; */
    --colorNaranja: #fb8406; /* #f47b29 este es el código de naranja en el manual de marca */
    --colorNaranjaAlterno: #ff8403; /* En menú */
    --colorRojo: #ec1d24;
    /*--color--AzulGeneral: #004884;*/
    --color--amarillo-1: #ffab00;
    /*Color Background Footer Datos*/
    --colorFooterInformacion: linear-gradient(-90deg, #015799, #017eb1) !important;
    /* ********* */
    /* Constantes generales */

    --borderRadiusBotones: 0px; /* Típico: 4px */
    --borderRadiusImagenOpciones: 0px; /* Típico: 4px */
    --borderRadiusOpciones: 0px; /* Típico: 4px */
    --borderWidthOpcion: 1.5px; /* Típico: 1px */

    --colorBackgroundGeneral: var(--colorBlanco);
    --enfasisModulos: 500;
    --enfasisOpciones: 600;
    --enfasisTituloPrincipal: 700;
    --fontFamilyGeneral: var(--font-family-1);
    --fontSizeMaterialIconAnotaciones: 20px;
    --fontSizeMaterialIconBotonSencillo: 20px;
    --fontSizeMaterialIconBotonVisor: 24px;
    --fontSizeMaterialIconCerrar: 20px;
    --fontSizeMaterialIconIrArriba: 20px;
    --fontSizeMaterialIconNormal: 24px;
    --imageOpcionContenedorWidth: 42px; /* Típico 42px */
    --imageOpcionContenedorHeight: var(--imageOpcionContenedorWidth); /* Típico 42px */
    --imageOpcionWidth: 30px; /* Típico 30px */
    --imageOpcionHeight: var(--imageOpcionWidth); /* Típico 30px */

    --multiplicadorLetra: 1;
    --letra10: calc(10px * var(--multiplicadorLetra));
    --letra11: calc(11px * var(--multiplicadorLetra));
    --letra12: calc(12px * var(--multiplicadorLetra));
    --letra13: calc(13px * var(--multiplicadorLetra));
    --letra14: calc(14px * var(--multiplicadorLetra));
    --letra15: calc(15px * var(--multiplicadorLetra));
    --letra16: calc(16px * var(--multiplicadorLetra));
    --letra17: calc(17px * var(--multiplicadorLetra));
    --letra18: calc(18px * var(--multiplicadorLetra));
    --letra20: calc(20px * var(--multiplicadorLetra));
    --letra21: calc(21px * var(--multiplicadorLetra));
    --letra22: calc(22px * var(--multiplicadorLetra));
    --letra24: calc(24px * var(--multiplicadorLetra));
    --letra25: calc(25px * var(--multiplicadorLetra));
    --letra26: calc(26px * var(--multiplicadorLetra));
    --letra28: calc(26px * var(--multiplicadorLetra));
    --letra32: calc(32px * var(--multiplicadorLetra));
    --letra36: calc(36px * var(--multiplicadorLetra));
    --letterSpacingBoton: 0.25px;
    --letterSpacingMiga: 0.5px;
    --margen10: 10px;
    --margen15: 15px;
    --margen20: 20px;
    --margen30: 30px;
    --margen50: 50px;
    --margenHorizontalFranjaNormal: var(--margen30); /* Margen lateral de las franjas, para menos de 1140px */
    --margenHorizontalFranjaSmall: var(--margen20); /* Margen lateral de las franjas, para menos de 768px */

    --margenVerticalNavegacionOpcionesNormal: var(--margen30); /* Aplica a contenedor-navegacion-nuevas-opciones */ /* Típico: 30px */
    --margenVerticalNavegacionOpcionesSmall: var(--margen15); /* Aplica a contenedor-navegacion-nuevas-opciones */ /* Típico: 15px, para menos de 768px */

    --margenHorizontalSeccionNormal: 0px; /* Típico: 0px */ /* Aplica a opcion-seleccionada */
    --margenHorizontalSeccionSmall: 20px; /* Típico: 20px */ /* Aplica a opcion-seleccionada */
    --margenTopSeccionNormal: 0px; /* Típico: 0px */ /* Aplica a opcion-seleccionada */
    --margenTopSeccionSmall: 15px; /* Típico: 15px */ /* Aplica a opcion-seleccionada */

    --margenRightMaterialIconAbrir: 18px; /* El margen derecho usualmente es 25px, el icon es de 24px * 24px, pero solo ocupa 10px el dibujo -> 24 - 10 = 14, 14 / 2 = 7, 25 - 7 = 18px */
    --margenRightMaterialIconAnotaciones: 25px;
    --margenRightMaterialIconBuscar: 25px;
    --margenRightMaterialIconCerrar: 21px; /* El margen derecho usualmente es 25px, el icon es de 20px * 20px, pero solo ocupa 16px el dibujo -> 24 - 16 = 8, 8 / 2 = 4, 25 - 4 = 21px */
    --margenRightMaterialIconConsultar: 16px; /* El margen derecho usualmente es 25px, pero el icon es de 24px * 24px, pero solo ocupa 6px el dibujo -> 24 - 6 = 18, 18 / 2 = 9, 25 - 9 = 16px */
    --margenRightMaterialIconIrArriba: 21px; /* El margen derecho usualmente es 25px, el icon es de 20px * 20px, pero solo ocupa 16px el dibujo -> 24 - 16 = 8, 8 / 2 = 4, 25 - 4 = 21px */

    --padding10: 10px;
    --padding15: 15px;
    --padding20: 20px;
    --padding30: 30px;
    --paddingOpcionesNormal: 0; /* Típico: var(--margen30) */
    --paddingOpcionesSmall: 0; /* Típico: var(--margen20) */
    /* -> Constantes generales */
    /* ver-mas-opcion */

    --botonVerMasRoundWidthNormal: 42px;
    --botonVerMasRoundHeightNormal: 42px;
    --botonVerMasRoundWidthSmall: 40px;
    --botonVerMasRoundHeightSmall: 40px;
    --botonVerMasBorderWidth: 1px; /* Típico: 1px */

    --botonVerMasImageWidth: 18px; /* Típico: 10px */
    --botonVerMasImageHeight: var(--botonVerMasImageWidth); /* Típico: 10px */

    --borderRadiusBotonVerMas: var(--borderRadiusBotones); /* Típico: 4px */ /* No se usa en ICBF */
    --borderRadiusBotonVerMasNormal: 21px; /* Típico: 4px */
    --borderRadiusBotonVerMasSmall: 20px; /* Típico: 4px */

    --colorBordeBotonVerMas: var(--color--gray-15); /* Antes: --color--green-2 */
    --colorBordeBotonVerMasHover: var(--color--gray-16); /* Antes: --colorBackgroundBotonVerMasHover */
    --colorBordeBotonVerMasFocus: var(--color--gray-17);
    --colorBordeBotonVerMasActive: var(--color--gray-17);
    --colorBackgroundBotonVerMas: var(--colorBlanco); /* Antes: --color--White-1 */
    --colorBackgroundBotonVerMasHover: var(--color--gray-18); /* Antes: --colorVerdeFondo */
    --colorBackgroundBotonVerMasFocus: var(--color--gray-18);
    --colorBackgroundBotonVerMasActive: var(--color--gray-18);
    --colorTextoBotonVerMas: var(--color--blue-10); /* Antes: --color--gray-11 | --color--green-2 */
    --colorTextoBotonVerMasHover: var(--color--blue-10); /* Antes: --color--gray-11 | --colorBlanco */

    --enfasisTextoBotonVerMas: 500;
    --fontFamilyBotonVerMas: var(--font-family-2); /* En ICBF 'Work Sans', sans-serif */

    --letraBotonVerMasNormal: var(--letra14); /* var(--letra14) */
    --letraBotonVerMasSmall: var(--letra12); /* var(--letra12) */
    /* -> ver-mas-opcion */
    /* ir-arriba */

    --colorBordeBotonIrArriba: var(--color--gray-15); /* Antes: --color--green-2 */
    --colorBordeBotonIrArribaHover: var(--color--gray-16); /* Antes: --colorBackgroundBotonIrArribaHover */
    --colorBordeBotonIrArribaFocus: var(--color--gray-17);
    --colorBordeBotonIrArribaActive: var(--color--gray-17);
    --colorBackgroundFooter: var(--colorAzulBackground); /*Azul Background Footer*/

    --colorBackgroundBotonIrArriba: var(--colorBlanco); /* Antes: --color--White-1 */
    --colorBackgroundBotonIrArribaHover: var(--color--gray-18); /* Antes: --colorVerdeFondo */
    --colorBackgroundBotonIrArribaFocus: var(--color--gray-18);
    --colorBackgroundBotonIrArribaActive: var(--color--gray-18);
    --colorTextoBotonIrArriba: var(--color--blue-10); /* Antes: --color--gray-11 | --color--green-2 */
    --colorTextoBotonIrArribaHover: var(--color--blue-10); /* Antes: --color--gray-11 | --colorBlanco */

    --enfasisTextoBotonIrArriba: var(--enfasisTextoBotonVerMas);
    /* -> ir-arriba */
    /* Constantes especiales ICBF */

    --btn--transition: .3s ease-out all;
    --btn__focus: max(0.125rem, 0.125rem) solid var(--color--blue-2); /* 2px solid var(--color--blue-2) */ /* UI v4: max(0.125rem, 0.125rem) solid #000000 */
    --btn__focus-offset: max(0.125rem, 0.188rem); /* UI v4 */

    --font-family-1: 'Montserrat', sans-serif;
    --font-family-2: 'Work Sans', sans-serif;
    --font-family-3: 'Merriweather Sans', sans-serif;
    --font-family-4: 'Roboto Mono', monospace;
    --font-family-5: 'Roboto Mono', sans-serif;
    --font-family-6: 'Open Sans', sans-serif;
    --px44: calc(2.75rem * var(--multiplicadorLetra));
    --px38: calc(2.35rem * var(--multiplicadorLetra));
    --px36: calc(2.25rem * var(--multiplicadorLetra));
    --px32: calc(2rem * var(--multiplicadorLetra));
    --px30: calc(1.875rem * var(--multiplicadorLetra));
    --px27: calc(1.6875rem * var(--multiplicadorLetra));
    --px24: calc(1.5rem * var(--multiplicadorLetra));
    --px23: calc(1.4375rem * var(--multiplicadorLetra));
    --px22: calc(1.375rem * var(--multiplicadorLetra));
    --px21: calc(1.3125rem * var(--multiplicadorLetra));
    --px20: calc(1.25rem * var(--multiplicadorLetra));
    --px18: calc(1.125rem * var(--multiplicadorLetra));
    --px17: calc(1.08rem * var(--multiplicadorLetra));
    --px16: calc(1rem * var(--multiplicadorLetra));
    --px15: calc(0.9375rem * var(--multiplicadorLetra));
    --px14: calc(0.875rem * var(--multiplicadorLetra));
    --px13: calc(0.8125rem * var(--multiplicadorLetra));
    --px12: calc(0.75rem * var(--multiplicadorLetra));
    --px10: calc(0.625rem * var(--multiplicadorLetra));
    /* -> Constantes especiales ICBF */
    /* franja-gov-co */

    --colorBackgroundFranjaGovCo: var(--color--blue-6);
    --colorTextoFranjaGovCo: var(--colorBlanco);
    /* -> franja-gov-co */
    /* franja-logo-buscador */

    --botonMenuBorderWidth: 1px; /* Típico: 1px */

    --bordeBotonBuscarTexto--enHeader: 1px solid var(--colorBordeBotonBuscarTexto--enHeader);
    --bordeBotonBuscarTexto--enHeaderHover: 1px solid var(--colorBordeBotonBuscarTexto--enHeaderHover);
    --bordeBotonBuscarTexto--enHeaderFocus: 1px solid var(--colorBordeBotonBuscarTexto--enHeaderFocus);
    --bordeBotonBuscarTexto--enHeaderActive: 1px solid var(--colorBordeBotonBuscarTexto--enHeaderActive);
    --colorBordeCasillaBuscador: var(--color--gray-2);
    --colorBordeCasillaBuscadorHover: var(--colorOverlay);
    --colorBackgroundBotonBuscarTexto--enHeader: var(--colorBlanco);
    --colorBackgroundBotonClearTexto--enInputBox--enHeader: var(--colorBackgroundFranjaLogoBuscador);
    --colorBackgroundEfectoBotonBuscarTexto--enHeader: var(--colorBlanco);
    --colorBackgroundEfectoBotonBuscarTexto--enHeaderHover: var(--color--gray-18);
    --colorBackgroundEfectoBotonBuscarTexto--enHeaderFocus: var(--color--gray-18);
    --colorBackgroundFranjaLogoBuscador: var(--colorBlanco);
    --colorBackgroundLogoGestorNormativo: var(--colorBackgroundFranjaLogoBuscador);
    --colorBordeBotonBuscarTexto--enHeader: var(--color--gray-15);
    --colorBordeBotonBuscarTexto--enHeaderHover: var(--color--gray-16);
    --colorBordeBotonBuscarTexto--enHeaderFocus: var(--color--gray-17);
    --colorBordeBotonBuscarTexto--enHeaderActive: var(--color--gray-17);
    --colorTextoBotonBuscarTexto--enHeader: var(--color--gray-11);
    --colorTextoBotonClearTexto--enInputBox: var(--color--gray-2);
    --colorTextoBotonClearTexto--enInputBoxHidden: var(--colorBackgroundFranjaLogoBuscador);
    --colorTextoBotonClearTexto--enInputBoxHover: var(--colorGrisTextos);
    --colorTextoCasillaBuscar--enHeader: var(--colorGrisTextos);
    --colorTextoLogoGestorNormativo: var(--colorGrisTextos);
    --header-main--container__height: 116px;
    --colorBackgroundEfectoBotonBuscarTexto: var(--color--blue-2);
    --colorBackgroundEfectoBotonBuscarTextoHover: var(--color--blue-1);
	--colorTextoBotonBuscarTexto: var(--colorBlanco);
	--colorBackgroundBotonBuscarTexto: var(--colorBlanco);
    /* -> franja-logo-buscador */
    /* franja-menu-institucional */

    --bordeOpcionMenuVertical: 1px solid var(--colorBordeOpcionMenuVertical);
    --colorBackgroundFranjaMenuInstitucional: var(--color--gray-21); /* Antes: --colorGrisFondo */
    --colorBackgroundLogoMenu: var(--colorBlanco);
    --colorBackgroundLogoMenuHover: var(--color--gray-18);
    --colorBackgroundLogoMenuFocus: var(--color--gray-18);
    --colorBackgroundLogoMenuActive: var(--color--gray-18);
    --colorBackgroundMenuVertical: var(--color--gray-13); /* Antes: --colorGrisFondo */
    --colorBackgroundOpcionMenuHorizontal: var(--colorBackgroundGeneral); /* Antes: --colorGrisFondo */
    --colorBackgroundOpcionMenuHorizontalHover: var(--colorBackgroundGeneral); /* Antes: --color--blue-1 */
    --colorBackgroundOpcionMenuVertical: var(--color--gray-13); /* Antes: --colorGrisFondo */
    --colorBackgroundOpcionMenuVerticalHover: var(--color--gray-13); /* Antes: --color--blue-1 */

    --colorBordeBotonMenu: var(--color--gray-15);
    --colorBordeBotonMenuHover: var(--color--gray-16);
    --colorBordeBotonMenuFocus: var(--color--gray-17);
    --colorBordeBotonMenuActive: var(--color--gray-17);
    --colorBordeOpcionMenuVertical: var(--color--gray-14);
    --colorTextoMenu: var(--color--gray-11); /* Antes: --color--blue-2 */
    --colorTextoOpcionMenuHorizontalFranjaMenuInstitucional: var(--colorCyan-2);
    --colorTextoOpcionMenuHorizontalFranjaMenuInstitucionalHover: var(--color--blue-8);
    --colorTextoOpcionMenuHorizontalFranjaMenuInstitucionalFocus: var(--color--blue-2);
    --colorTextoOpcionMenuHorizontalFranjaMenuInstitucionalVisited: var(--color--blue-9);
    --colorTextoOpcionMenuVertical: var(--color--gray-1);
    --colorTextoOpcionMenuVerticalHover: var(--color--blue-8);
    --colorTextoOpcionMenuVerticalFocus: var(--color--blue-2);
    --colorTextoOpcionMenuVerticalVisited: var(--color--blue-9);
    /* -> franja-menu-institucional */
    /* franja-migas */

    --colorBordeSeparacionMigas: var(--color--gray-2);
    --colorBackgroundContenidoMigas: var(--colorBackgroundFranjaMigas);
    --colorBackgroundFranjaMigas: var(--colorBlanco);
    --colorBordeFranjaColorSuperior: var(--color--igualdad);
    --colorTextoMiga: var(--colorGrisTextos);
    --colorTextoMigaActiva: var(--colorTextoLinks); /* Es la que tiene el hipervínculo | Antes: --colorGrisTextosICBF */
    --colorTextoMigaActivaHover: var(--colorTextoLinksHover); /* Antes: --colorGrisTextosICBF */
    --colorTextoMigaActivaVisited: var(--color--blue-11);
    --colorTextoMigaInicioIcono: var(--colorGrisTextos); /* No se usa en ICBF */
    --colorTextoMigaInicioActivaIcono: var(--colorTextoLinks); /* Antes: --colorGrisTextosICBF */ /* No se usa en ICBF */

    --letraMiga: var(--px10);
    --letraMigaSeparador: var(--px12);
    /* --> franja-migas */
    /* index */

    --colorBordeBotonVerMasIndex: var(--color--blue-1);
    --colorBordeBotonVerMasIndexHover: var(--color--blue-2);
    --colorBordeModulo: var(--color--gray-9);
    --colorBordeModuloHover: var(--color--gray-9);
    --colorBackgroundBotonVerMasIndex: var(--color--blue-2);
    --colorBackgroundBotonVerMasIndexHover: var(--colorBlanco);
    --colorBackgroundModulo: var(--color--gray-4);
    --colorBackgroundModuloHover: var(--color--gray-4);
    --colorTextoBotonVerMasIndex: var(--colorBlanco);
    --colorTextoBotonVerMasIndexHover: var(--color--blue-2);
    --colorTextoDescripcionModulo: var(--colorGrisTextos);
    --colorTextoDescripcionModuloHover: var(--colorBlanco);
    --colorTextoTituloAuxiliar: var(--colorGrisTextos);
    --colorTextoTituloModulo: var(--colorTextoLinks); /* Antes: --color--blue-6 */
    --colorTextoTituloModuloHover: var(--color--blue-11); /* Antes: --color--blue-1 */
    --colorTextoTituloModuloVisited: var(--color--blue-11);
    --colorTextoTituloPrincipal: var(--colorGrisTextos);
    --letraDescripcionModuloNormal: var(--px15);
    --letraDescripcionModuloSmall: var(--px15); /* No cambia */
    --letraTituloH1PrincipalNormal: var(--letra26);
    --letraTituloH1PrincipalSmall: var(--letra24);
    --letraTituloH2AuxiliarNormal: var(--letra16);
    --letraTituloH2AuxiliarSmall: var(--letra14);
    --letraTituloModuloNormal: var(--px18);
    --letraTituloModuloSmall: var(--px18); /* No cambia */
    /* --> index */
    /* go-back */

    --colorBordeBotonGoBack: var(--color--NoSeUsa);
    --colorBordeBotonGoBackAlterno: var(--color--NoSeUsa);
    --colorBackgroundBotonGoBack: var(--color--NoSeUsa);
    --colorTextoBotonGoBack: var(--color--NoSeUsa);
    --colorTextoBotonGoBackHover: var(--color--NoSeUsa);
    /* -> go-back */
    /* opcion-seleccionada */

    --borderRadiusOpcionSeleccionada: var(--borderRadiusOpciones); /* Depende de --panelOpcionSeleccionadaBorderWidth */ /* Típico: border-radius: 4px 4px 0 0 */

    --colorBordeOpcionSeleccionada: var(--colorGrisBorde);
    --colorBackgroundExplicacionOpcionSeleccionada: var(--colorVerdeFondo);
    --colorBackgroundIconoOpcionSeleccionada: var(--colorVerdeFondo);
    --colorBackgroundOpcionSeleccionada: var(--colorBlanco);
    --colorTextoDescripcionOpcionSeleccionada: var(--color--gray-19);
    --colorTextoExplicacionOpcionSeleccionada: var(--colorBlanco);
    --colorTextoIconoOpcionSeleccionada: var(--colorBlanco);
    --colorTextoTituloOpcionSeleccionada: var(--colorGrisTextosICBF);
    --letraExplicacionOpcionSeleccionadaH3Normal: var(--letra14);
    --letraExplicacionOpcionSeleccionadaH3Small: var(--letra12);
    --letraTituloH1Normal: var(--px38); /* var(--letra22) */
    --letraLineHeightTituloH1Normal: var(--px44); /* calc(28px * var(--multiplicadorLetra)) */ /* Se agrega 6px a font-size --letraTituloH1Normal */
    --letraTituloH1Small: var(--px23); /* var(--letra20) */
    --letraLineHeightTituloH1Small: var(--px27); /* calc(24px * var(--multiplicadorLetra)) */ /* Se agrega 4px a font-size --letraTituloH1Small */
    --letraTituloH1Smallest: var(--px20); /* var(--letra20) */
    --letraLineHeightTituloH1Smallest: var(--px24); /* calc(24px * var(--multiplicadorLetra)) */ /* Se agrega 4px a font-size --letraTituloH1Small */

    --letraDescripcionOpcionSeleccionadaNormal: var(--px14);
    --letraLineHeightDescripcionOpcionSeleccionadaNormal: var(--px20); /* Se agrega 6px a font-size --letraDescripcionOpcionSeleccionadaNormal */
    --letraDescripcionOpcionSeleccionadaSmall: var(--px12);
    --letraLineHeightDescripcionOpcionSeleccionadaSmall: var(--px16); /* calc(18px * var(--multiplicadorLetra)) */ /* Se agrega 4px a font-size --letraDescripcionOpcionSeleccionadaSmall */

    --letraTituloH2Normal: var(--px18); /* var(--letra16) */
    --letraLineHeightTituloH2Normal: var(--px24); /* calc(22px * var(--multiplicadorLetra)) */ /* Se agrega 6px a font-size --letraTituloH1Normal */
    --letraTituloH2Small: var(--px16); /* var(--letra14) */
    --letraLineHeightTituloH2Small: var(--px22); /* calc(18px * var(--multiplicadorLetra)) */ /* Se agrega 4px a font-size --letraTituloH1Normal */

    --letraTituloH3Normal: var(--letra12);
    --letraTituloH3Small: var(--letra10);
    --margenDescripcionOpcionSeleccionadaNormal: var(--margen15) 0 0 0; /* Típico: margin: 15px 30px 0 30px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */
    --margenDescripcionOpcionSeleccionadaSmall: var(--margen10) 0 0 0; /* Típico: margin: 10px 20px 0 20px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */
    --margenExplicacionOpcionSeleccionadaNormal: 0; /* Típico: margin: 0 30px 0 30px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */
    --margenExplicacionOpcionSeleccionadaSmall: 0 0 var(--margen10) 0; /* Típico: margin: 0 20px 10px 20px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */
    --margenTituloOpcionSeleccionadaNormal: var(--margen30) 0 0 0; /* Típico: margin: 30px 30px 0 30px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */
    --margenTituloOpcionSeleccionadaSmall: var(--margen20) 0 0 0; /* Típico: margin: 20px 20px 0 20px */ /* Si --panelOpcionSeleccionadaBorderWidth es 0px, no debe haber mérgenes laterales */

    --margenOpcionSeleccionadaNormal: var(--margenTopSeccionNormal) var(--margenHorizontalSeccionNormal) 0 var(--margenHorizontalSeccionNormal); /* Típico: margin: 0 */
    --margenOpcionSeleccionadaSmall: var(--margenTopSeccionSmall) var(--margenHorizontalSeccionSmall) 0 var(--margenHorizontalSeccionSmall); /* Típico: margin: 15px 20px 0 20px */

    --panelOpcionSeleccionadaBorderWidth: 0px; /* No debe verse el borde */ /* Típico: 1px */
    /* -> opcion-seleccionada */
    /* navegacion-nuevas-opciones */

    --borderRadiusNavegacionNuevasOpciones: var(--borderRadiusOpcionSeleccionada); /* Depende de --panelOpcionSeleccionadaBorderWidth */ /* Típico: 4px */
    --borderRadiusImagenOpcionNueva: var(--borderRadiusImagenOpciones); /* Típico: 4px */
    --borderRadiusOpcionNueva: var(--borderRadiusOpciones); /* Típico: 4px */
    --borderWidthOpcionNueva: var(--borderWidthOpcion); /* Típico: 1px */

    --colorBordeImagenOpcion: var(--color--green-2);
    --colorBordeImagenOpcionHover: var(--colorBackgroundImagenOpcionNuevaHover);
    --colorBordeNavegacionNuevasOpciones: var(--colorGrisBorde);
    --colorBordeOpcionEntidad: var(--colorGrisBorde);
    --colorBordeOpcionEntidadHover: var(--colorGrisBorde);
    --colorBordeOpcionNueva: var(--colorGrisBorde);
    --colorBordeOpcionNuevaHover: var(--colorGrisBorde);
    --colorBackgroundImagenOpcionEntidad: var(--colorBlanco);
    --colorBackgroundImagenOpcionEntidadHover: var(--colorVerdeFondo);
    --colorBackgroundImagenOpcionNueva: var(--colorBlanco);
    --colorBackgroundImagenOpcionNuevaHover: var(--colorVerdeFondo);
    --colorBackgroundNavegacionNuevasOpciones: var(--colorBackgroundGeneral);
    --colorBackgroundOpcionEntidad: var(--colorBlanco);
    --colorBackgroundOpcionEntidadHover: var(--colorBlanco);
    --colorBackgroundOpcionNueva: var(--color--gray-4);
    --colorBackgroundOpcionNuevaHover: var(--color--gray-4);
    --colorImagenOpcion: var(--color--green-2);
    --colorImagenOpcionHover: var(--colorBlanco);
    --colorTextoIdTipoDocumento: var(--colorGrisTextos);
    --colorTextoIdTipoDocumentoHover: var(--colorGrisTextos);
    --colorTextoTituloOpcionNueva: var(--colorGrisTextos);
    --colorTextoTituloOpcionNuevaHover: var(--colorGrisTextos);
    --imageOpcionBorderWidth: 1px; /* Típico: 0px */

    --imageOpcionNuevaContenedorWidth: var(--imageOpcionContenedorWidth); /* Típico 42px */
    --imageOpcionNuevaContenedorHeight: var(--imageOpcionContenedorHeight); /* Típico 42px */
    --imageOpcionNuevaWidth: var(--imageOpcionWidth); /* Típico 30px */
    --imageOpcionNuevaHeight: var(--imageOpcionHeight); /* Típico 30px */

    --letraOpcionNuevaNormal: var(--letra16);
    --letraLineHeightOpcionNuevaNormal: calc(22px * var(--multiplicadorLetra));
    --letraOpcionNuevaSmall: var(--letra14);
    --letraLineHeightOpcionNuevaSmall: calc(20px * var(--multiplicadorLetra));
    --letraOpcionNuevaSmallest: var(--letra13);
    --letraLineHeightOpcionNuevaSmallest: calc(17px * var(--multiplicadorLetra));
    --margenNavegacionOpcionesNormal: var(--margenVerticalNavegacionOpcionesNormal) var(--margenHorizontalSeccionNormal) 0 var(--margenHorizontalSeccionNormal); /* Típico: margin: 30px 0 30px 0 */
    --margenNavegacionOpcionesSmall: var(--margenVerticalNavegacionOpcionesSmall) var(--margenHorizontalSeccionSmall) 0 var(--margenHorizontalSeccionSmall); /* Típico: margin: 15px 0 20px 0 */

    --margenOpcionNuevaNormal: 0 20px 0 38px; /* Típico: margin: 0 */
    --margenOpcionNuevaSmall: 0 16px 0 16px; /* Típico: margin: 0 */
    --margenHorizontalImagenOpcionNormal: 20px; /* Típico 20px */
    --margenHorizontalImagenOpcionSmall: var(--margenHorizontalImagenOpcionNormal);
    --margenVerticalImagenOpcionNormal: 20px; /* Típico 20px */
    --margenVerticalImagenOpcionSmall: 16px; /* Típico 16px */
    --margenVerticalTextoOpcionNormal: 30px;
    --margenVerticalTextoOpcionSmall: 20px;
    --panelNavegacionNuevasOpcionesBorderWidth: var(--panelOpcionSeleccionadaBorderWidth); /* No debe verse el borde */ /* Típico: 1px */
    /* -> navegacion-nuevas-opciones */
    /* panel-selector-year */

    --colorBordeItemListaSelector: var(--colorGrisSeparadorOpciones);
    --colorBordeSelectItems: var(--colorGrisBorde);
    --colorBackgroundItemsSelector: var(--colorGrisBackgroundSelect);
    --colorBackgroundItemsSelectorHover: var(--colorVerdeFondo);
    --colorBackgroundPanelSelectorYear: var(--colorBackgroundGeneral);
    --colorBackgroundSelector: var(--colorGrisBackgroundSelect);
    --colorTextoLabelSelectorYear: var(--colorGrisTextosICBF);
    --colorTextoSelectYears: var(--colorGrisTextosICBF);
    --colorTextoSelectYearsHover: var(--colorBlanco);
    --letraSelectorNormal: var(--letra16);
    /* -> panel-selector-year */
    /* navegacion-nuevas-opciones panel-documentos-year */

    --colorBordeOpcionYear: var(--colorGrisBorde);
    --colorBordePanelDocumentosYear: var(--colorGrisSeparadorOpciones);
    --colorBackgroundImagenOpcionYear: var(--colorVerdeFondo);
    --colorBackgroundImagenOpcionYearHover: var(--colorBlanco);
    --colorBackgroundOpcionNueva--esDocumento: var(--colorBlanco);
    --colorBackgroundOpcionNuevaHover--esDocumento: var(--colorBlanco);
    --colorBackgroundOpcionYear: var(--color--gray-4);
    --colorBackgroundOpcionYearHover: var(--color--gray-4);
    --colorImagenOpcionYear: var(--colorBlanco);
    --colorImagenOpcionYearHover: var(--color--green-2);
    --colorTextoDescripcionDocumento: var(--colorGrisTextos);
    --colorTextoDescripcionDocumentoHover: var(--colorGrisTextos);
    --colorTextoIdDocumento: var(--colorGrisTextos);
    --colorTextoIdDocumentoHover: var(--colorGrisTextos);
    --colorTextoIdEntidad: var(--colorGrisTextos);
    --colorTextoIdEntidadHover: var(--colorGrisTextos);
    --colorTextoTituloOpcionYear: var(--colorGrisTextosICBF);
    --colorTextoTituloOpcionYearHover: var(--colorGrisTextosICBF);
    --enfasisDocumentos: 500;
    --enfasisYears: 600;
    --letraDescripcionDocumentoNormal: var(--letra16);
    --letraLineHeightDescripcionDocumentoNormal: calc(22px * var(--multiplicadorLetra));
    --letraDescripcionDocumentoSmall: var(--letra14);
    --letraLineHeightDescripcionDocumentoSmall: calc(20px * var(--multiplicadorLetra));
    /* --> navegacion-nuevas-opciones panel-documentos-year */
    /* navegacion-nuevas-opciones panel-lista-boletines */

    --colorBordeOpcionBoletin: var(--colorGrisBorde);
    --colorBordeOpcionBoletinHover: var(--colorGrisBorde);
    --colorBackgroundImagenOpcionBoletin: var(--colorBlanco);
    --colorBackgroundImagenOpcionBoletinHover: var(--colorVerdeFondo);
    --colorBackgroundOpcionBoletin: var(--colorBlanco);
    --colorBackgroundOpcionBoletinHover: var(--colorBlanco);
    --colorTextoIdBoletin: var(--colorGrisTextos);
    --colorTextoIdBoletinHover: var(--colorGrisTextos);
    /* --> navegacion-nuevas-opciones panel-lista-boletines */
    /* panel-selector-letra */

    --boxLetrasBorderWidth: 1px; /* Típico: 1px */

    --colorBordeBoxLetras: var(--color--gray-15); /* Antes: --color--green-2 */
    --colorBordeBoxLetrasHover: var(--color--gray-16); /* Antes: --colorBackgroundLetrasAbecedarioHover */
    --colorBordeBoxLetrasFocus: var(--color--gray-17);
    --colorBordeBoxLetrasActive: var(--color--gray-17);
    --colorBackgroundLetrasAbecedario: var(--colorBlanco); /* Antes: --color--White-1 */
    --colorBackgroundLetrasAbecedarioHover: var(--color--gray-18); /* Antes: --colorVerdeFondo */
    --colorBackgroundLetrasAbecedarioFocus: var(--color--gray-18);
    --colorBackgroundLetrasAbecedarioActive: var(--color--gray-18);
    --colorBackgroundPanelSelectorLetra: var(--colorBackgroundGeneral);
    --colorTextoLetrasAbecedario: var(--colorTextoLinks); /* Antes: --color--gray-11 | --color--green-2 */
    --colorTextoLetrasAbecedarioHover: var(--colorTextoLinksHover); /* Antes: --color--gray-11 | --colorBlanco */

    --enfasisLetras: 600;
    /* --> panel-selector-letra */
    /* navegacion-nuevas-opciones panel-materias-letra */

    --colorBordeOpcionLetra: var(--colorGrisBorde);
    --colorBordeOpcionTipoDocumento: var(--colorGrisBorde);
    --colorBordeOpcionTipoDocumentoHover: var(--colorGrisBorde);
    --colorBordePanelMateriasLetra: var(--colorGrisBorde);
    --colorBackgroundImagenOpcionEntidad-esMateria: var(--colorBlanco);
    --colorBackgroundImagenOpcionEntidadHover-esMateria: var(--colorVerdeFondo);
    --colorBackgroundImagenOpcionLetra: var(--colorVerdeFondo);
    --colorBackgroundImagenOpcionLetraHover: var(--colorBlanco);
    --colorBackgroundImagenOpcionNueva--esMateria: var(--colorBlanco);
    --colorBackgroundImagenOpcionNuevaHover--esMateria: var(--colorVerdeFondo);
    --colorBackgroundImagenOpcionTipoDocumento: var(--colorBlanco);
    --colorBackgroundImagenOpcionTipoDocumentoHover: var(--colorVerdeFondo);
    --colorBackgroundOpcionLetra: var(--color--gray-4);
    --colorBackgroundOpcionEntidad--enMateria: var(--colorBlanco);
    --colorBackgroundOpcionEntidadHover--enMateria: var(--colorBlanco);
    --colorBackgroundOpcionNueva--esMateria: var(--colorBlanco);
    --colorBackgroundOpcionNueva--esMateriaHover: var(--colorBlanco);
    --colorBackgroundOpcionTipoDocumento: var(--color--gray-4);
    --colorBackgroundOpcionTipoDocumentoHover: var(--color--gray-4);
    --colorImagenOpcion--esMateria: var(--color--green-2);
    --colorImagenOpcionHover--esMateria: var(--colorBlanco);
    --colorImagenOpcionEntidad--esMateria: var(--color--green-2);
    --colorImagenOpcionEntidadHover--esMateria: var(--colorBlanco);
    --colorImagenOpcionLetra: var(--colorBlanco);
    --colorImagenOpcionLetraHover: var(--color--green-2);
    --colorImagenOpcionTipoDocumento--esMateria: var(--color--green-2);
    --colorImagenOpcionTipoDocumentoHover--esMateria: var(--colorBlanco);
    --colorTextoIdMateria: var(--colorGrisTextos);
    --colorTextoIdMateriaHover: var(--colorGrisTextos);
    --colorTextoIdTipoDocumento--enMateria: var(--colorGrisTextos);
    --colorTextoIdTipoDocumentoHover--enMateria: var(--colorGrisTextos);
    --colorTextoTituloOpcionLetra: var(--colorGrisTextosICBF);
    --colorTextoTituloOpcionLetraHover: var(--colorGrisTextosICBF);
    /* --> navegacion-nuevas-opciones panel-materias-letra */
    /* footer */

    --colorBackgroundFooter: var(--colorBlanco);
    --colorTextoEnlacesFooter: var(--colorTextoLinks);
    --colorTextoEnlacesFooterHover: var(--colorTextoLinksHover);
    --colorTextoTitulosFooter: var(--color--blue-1);
    --colorTextosFooter: var(--color--gray-1);
    --colorFlechasCarrusel: var(--colorBlanco);
    /* -> footer */
    /* franja-AJ */

    --colorBordeFranjaAJ: var(--colorRojoSeparador);
    --colorBackgroundFranjaAJ: var(--color--gray-3);
    --colorTextoEnlacesFranjaAJ: var(--colorTextoLinks);
    --colorTextoEnlacesFranjaAJHover: var(--colorTextoLinksHover);
    --colorTextoFranjaAJ: var(--colorGrisTextos);
    --colorTextoTitulosFranjaAJ: var(--colorGrisTextos);
    /* -> franja-AJ */
    /* franja-footer */

    --borderRadiusPrefooter: 13px;
    --borderWidthPrefooter: 2px;
    --colorBordePrefooter: var(--color--blue-4);
    --colorBackgroundFlechasCarrusel: var(--color--gray-5);
    --colorBackgroundFlechasCarruselHover: var(--color--gray-6);
    --colorBackgroundFranjaPrefooter: var(--colorBackgroundFooter);
    --colorBackgroundIconosRedesSociales: var(--color--red);
    --colorTextoFranjaPrefooter: var(--colorGrisTextos);
    --colorTextoIconosRedesSociales: var(--colorBlanco);
    --colorTextoMenuPrefooter: var(--color--red);
    --colorTextoMenuPrefooterHover: var(--color--red);
    --colorTextoRedesSocialesPrefooter: var(--color--red);
    --colorTextoRedesSocialesPrefooterHover: var(--color--red);
    /* -> franja-footer */
    /* franja-informacion */

    --colorBackgroundFranjaInformacion: var(--color--blue-2);
    /* -> franja-informacion */
    /* visor - medidas */

    --altoPanelDocumentoCarta: 1320px; /**/ /* Letter size in pixels when using 120 DPI: 1320 x 1020 pixels https://papersizes.online/paper-size/letter/ */
    /* Native screen resolution in DPI varies a lot, but it's generally between 100 and 120 DPI.                 */
    /* 1754px Tamaño para A4 con 150PPI -https://www.papersizes.org/a-sizes-in-pixels.htm-                       */
    --altoPanelDocumento: var(--altoPanelDocumentoCarta); /**/

    --borderRadiusBotonVisorCompuestoNormal: 21px; /**/
    --borderRadiusBotonVisorCompuestoSmall: 20px; /**/
    --borderRadiusBotonNormalVisor: 0;
    --borderRadiusBotonVisorSencilloNormal: 21px; /**/
    --borderRadiusBotonVisorSencilloSmall: 20px; /**/

    --borderRadiusPanelesVisor: 10px;
    --borderRadiusPanelFondoDocumento: 0px; /**/
    --borderRadiusPanelFondoDocumentoWide: 4px; /* Normalmente 4px */ /**/

    --botonPanelBotonesVisorActivadoBorderWidth: 4px; /* Este es el width del borde izquierdo de los botones activados */
    --botonVisorCompuestoBorderWidth: 1px; /**/
    --botonVisorCompuestoNormalHeight: var(--botonVisorSencilloNormalSize); /**/
    --botonVisorCompuestoSmallHeight: var(--botonVisorSencilloSmallSize); /**/
    --botonVisorSencilloBorderWidth: 1px; /**/
    --botonVisorSencilloNormalSize: 42px; /**/
    --botonVisorSencilloSmallSize: 40px; /**/
    --botonVisorNormalSize: 120px;
    --botonVisorBiggerSize: 121px;
    --botonVisorSmallSize: var(--botonVisorSencilloSmallSize); /**/

    --enfasisTextoBotonAnotaciones: var(--enfasisTextoBotonVerMas);
    --enfasisTextosDocumentos: 400; /* Con Merriweather estaba en 300 */

    --fontFamilyBotonVisor: var(--font-family-2); /* En ICBF 'Work Sans', sans-serif */
    --fontFamilyDocumento: var(--font-family-1); /* En ICBF 'Montserrat', sans-serif */

    --letraBotonVisorCompuestoNormal: var(--letra14); /**/
    --letraBotonVisorCompuestoSmall: var(--letra12); /**/
    --letraDocumentoNormal: var(--letra18); /**/
    --letraDocumentoSmall: var(--letra16); /**/
    --letraDocumentoSmallest: var(--letra14); /**/
    --letraLineHeightDocumentoNormal: calc(32px * var(--multiplicadorLetra)); /**/ /* Se agrega 14px a font-size --letraDocumentoNormal */
    --letraLineHeightDocumentoSmall: calc(26px * var(--multiplicadorLetra)); /**/ /* Se agrega 10px a font-size --letraDocumentoSmall */
    --letraLineHeightDocumentoSmallest: calc(22px * var(--multiplicadorLetra)); /**/ /* Se agrega 8px a font-size --letraDocumentoSmallest */
    --letraDocumentoTablasNormal: var(--letra14); /**/
    --letraDocumentoTablasSmall: var(--letra12); /**/
    --letraDocumentoTablasSmallest: var(--letra10); /**/

    --margenPanelDocumentoBiggest: 30px; /**/ /* Margen entre panel-fondo-documento y panel-documento */
    --margenPanelDocumentoBigger: 20px; /**/
    --margenPanelDocumentoNormal: 15px; /**/
    --margenPanelDocumentoSmall: 10px; /**/

    --paddingHorizontalDocumentosNormal: 12.5%; /**/ /* Más o menos 120px para ancho mayor a 958px de panel-documento, */
    /* cuando al ancho máximo del espacio para el documento es 1140px */
    --paddingHorizontalDocumentosSmall: 10%; /**/ /* Más o menos 83px para ancho de 837px de panel-documento, */
    /* cuando al ancho máximo del espacio para el documento es 990px */
    --paddingSuperiorDocumentoNormal: 100px; /**/
    --paddingSuperiorDocumentoSmall: 80px; /**/
    --paddingInferiorDocumentoNormal: 200px; /**/
    --paddingInferiorDocumentoSmall: 100px; /**/

    --panelAuxiliarWidthSmallest: 280px;
    --panelAuxiliarWidthSmall: 300px;
    --panelAuxiliarWidthNormal: 350px;
    --panelAuxiliarWidthBigger: 400px;
    --panelLateralModalWidth: 400px;
    /* -> visor - medidas */
    /* visor - colores */

    --colorBordeBotonVisorCompuesto: var(--color--gray-15); /**/
    --colorBordeBotonVisorCompuestoHover: var(--color--gray-16); /**/
    --colorBordeBotonVisorCompuestoFocus: var(--color--gray-16); /**/
    --colorBordeBotonVisorCompuestoActive: var(--color--gray-16); /**/
    --colorBordeBotonVisorSencillo: var(--color--gray-15); /**/
    --colorBordeBotonVisorSencilloHover: var(--color--gray-16); /**/
    --colorBordeBotonVisorSencilloFocus: var(--color--gray-16); /**/
    --colorBordeBotonVisorSencilloActive: var(--color--gray-16); /**/
    --colorBordeBotonSUINJuriscol: var(--color--gray-15); /**/
    --colorBordeBotonSUINJuriscolHover: var(--color--gray-16); /**/
    --colorBordeBotonSUINJuriscolFocus: var(--color--gray-16); /**/
    --colorBordeBotonSUINJuriscolActive: var(--color--gray-16); /**/

    --colorBordePanelDocumento: var(--colorBordePanelesVisor);
    --colorBordePanelVisor: var(--color--gray-14); /**/
    --colorBordePanelesVisor: var(--color--gray-14); /**/

    --colorBackgroundBotonAnotaciones: var(--colorBlanco); /**/
    --colorBackgroundBotonAnotacionesHover: var(--color--gray-18); /**/
    --colorBackgroundBotonAnotacionesFocus: var(--color--gray-18); /**/
    --colorBackgroundBotonAnotacionesActive: var(--color--gray-18); /**/
    --colorBackgroundBotonBuscarTexto--enVisor: var(--color--blue-1);
    --colorBackgroundBotonBuscarTexto--enVisorHover: var(--colorNaranja);
    --colorBackgroundBotonCerrarPanelModal: var(--color--blue-1);
    --colorBackgroundBotonCerrarPanelModalHover: var(--color--blue-1);
    --colorBackgroundBotonVisorSencillo: var(--colorBlanco); /**/
    --colorBackgroundBotonVisorSencilloHover: var(--color--gray-18); /**/
    --colorBackgroundBotonVisorSencilloFocus: var(--color--gray-18); /**/
    --colorBackgroundBotonVisorSencilloActive: var(--color--gray-18); /**/
    --colorBackgroundBotonNuevaBusquedaTexto--enVisor: var(--colorVerdeFondo);
    --colorBackgroundBotonNuevaBusquedaTexto--enVisorHover: var(--color--blue-6);
    --colorBackgroundBotonSUINJuriscol: var(--colorBlanco); /**/
    --colorBackgroundBotonSUINJuriscolHover: var(--colorBlanco); /**/
    --colorBackgroundBotonSUINJuriscolFocus: var(--color--gray-18); /**/
    --colorBackgroundBotonSUINJuriscolActive: var(--color--gray-18); /**/

    --colorBackgroundContenidoVisor: var(--colorBackgroundGeneral);
    --colorBackgroundFranjaNavegacionVisor: var(--color--gray-20); /**/
    --colorBackgroundFranjaVisor: var(--colorBackgroundGeneral); /**/

    --colorBackgroundPanelAuxiliar: var(--color--blue-12); /**/ /* panel-auxiliar es el panel en que se ubican los paneles correspondientes a los botones del visor */ /* Visor */
    /* Su contenido se mueve a panel-lateral-modal cuando se cumple la condición para superponer este panel */ /* Visor */
    --colorBackgroundPanelFondoDocumento: var(--color--blue-12); /**/
    --colorBackgroundPanelLateralModal: var(--colorBackgroundPanelFondoDocumento);
    --colorImagenBotonSencillo: var(--colorBlanco);
    --colorTextoBoldAJ: var(--colorGrisTextosICBF); /**/
    --colorTextoBookmarksAJ: var(--colorGrisTextosICBF); /**/
    --colorTextoBookmarksAJHover: var(--colorGrisTextosICBF); /**/
    --colorTextoBotonVisorCompuesto: var(--color--blue-10); /**/
    --colorTextoBotonVisorCompuestoHover: var(--color--blue-10); /**/
    --colorTextoDocumento: var(--colorNegroTextos);
    --colorTextoGeneral--enVisor: var(--color--gray-12); /**/
    --colorTextoTituloDocumentoVisor: var(--color--gray-12); /**/
    /* -> visor - colores */
    /* visor - CVJA e hipervínculos en documentos */

    --borderRadiusBotonCajasValorJuridicoAgregadoNormal: var(--borderRadiusBotonVisorCompuestoNormal); /**/
    --borderRadiusBotonCajasValorJuridicoAgregadoSmall: var(--borderRadiusBotonVisorCompuestoSmall); /**/

    --botonVisorCVJAsBorderWidth: 1px;
    --botonCajasValorJuridicoAgregadoSmallHeight: var(--botonVisorCompuestoSmallHeight); /**/
    --botonCajasValorJuridicoAgregadoNormalHeight: var(--botonVisorCompuestoNormalHeight); /**/
    --botonCajasValorJuridicoAgregadoSmallMinWidth: 120px; /**/
    --botonCajasValorJuridicoAgregadoNormalMinWidth: 162px; /**/

    --colorBordeCajasValorJuridicoAgregado: var(--color--gray-15); /**/
    --colorBordeCajasValorJuridicoAgregadoHover: var(--color--gray-16); /**/
    --colorBordeCajasValorJuridicoAgregadoFocus: var(--color--gray-17); /**/
    --colorBordeCajasValorJuridicoAgregadoActive: var(--color--gray-17); /**/

    --colorBackgroundEncabezadoCajasValorJuridicoAgregado: var(--colorBlanco); /**/
    --colorBackgroundEncabezadoCajasValorJuridicoAgregadoHover: var(--color--gray-18); /**/
    --colorBackgroundEncabezadoCajasValorJuridicoAgregadoFocus: var(--color--gray-18); /**/
    --colorBackgroundEncabezadoCajasValorJuridicoAgregadoActive: var(--color--gray-18); /**/

    --colorBackgroundNotasConcordancias: var(--color--gray-20);
    --colorBackgroundNotasLegislacionAnterior: var(--color--yellow-1);
    --colorBackgroundNotasVigencia: var(--color--blue-12); /**/

    --colorTextoEncabezadoCajasValorJuridicoAgregado: var(--color--blue-10); /**/
    --colorTextoEncabezadoCajasValorJuridicoAgregadoHover: var(--color--blue-10); /**/
    --colorTextoTachados: var(--colorRojoTachados); /**/

    --enfasisTextoEncabezadoCajasValorJuridicoAgregado: var(--enfasisTextoBotonVerMas); /**/
    /* --> visor - CVJA e hipervínculos en documentos */
    /* Usabilidad */

    --colorBordeBotonUsabilidad: var(--color--blue-9);
    --colorBordeBotonUsabilidadHover: var(--color--blue-9);
    --colorBackgroundBotonMenuUsabilidad: var(--color--blue-8);
    --colorBackgroundBotonMenuUsabilidadHover: var(--color--blue-8);
    --colorBackgroundImagenBotonMenuUsabilidad: var(--colorBlanco);
    --colorBackgroundImagenBotonMenuUsabilidadHover: var(--colorBlanco);
    --colorBackgroundMenuUsabilidad: var(--color--blue-9);
    --colorTextoBotonMenuUsabilidad: var(--colorBlanco);
    --colorTextoBotonMenuUsabilidadHover: var(--colorBlanco);
    --fontFamilyBotonUsabilidad: var(--font-family-1); /* En ICBF 'Montserrat', sans-serif */

    --shadowUsabilidad: 0px 0px 10px 3px #0000002b;
    /* -> Usabilidad */

  /* -> menú aj */
  --colorPanelFondoDocumento: var(--colorBackgroundGeneral);
  --colorTextoBotonDocumento: var(--color--black);
  --colorBackgroundOpcionNuevaMenuAJ: var(--color--gray-3);
  --colorBackgroundOpcionNuevaMenuAJHover: var(--color--blue-1); 
  /* -> menú aj */

	--colorBackgroundBotonBuscarTextoVisor: var(--color--blue-1);
	--colorBackgroundBotonBuscarTextoVisorHover: var(--colorCyan-2);
    --colorBackgroundBotonNuevaBusquedaTextoVisor: var(--color--blue-1); /* Visor */
    --colorBackgroundBotonNuevaBusquedaTextoVisorHover: var(--colorNaranja); /* Visor */
    --colorBackgroundBotonSencilloPanelBotonesVisor: var(--color--blue-1); /* Visor */
    --colorBackgroundBotonSencilloPanelBotonesVisorHover: var(--colorNaranja); /* Visor */



    --colorBackgroundInputCasillaBusquedaVisor: var(--colorBlanco);
    --colorBackgroundMenuVertical: var(--colorGrisClaroVerdoso);
    --colorBackgroundModulosMenu: var(--colorBackgroundGeneral);
    --colorBackgroundOpcionMenuContextual: var(--color--AzulGeneral);
    --colorBackgroundOpcionMenuContextualHover: var(--colorNaranja);
    --colorBackgroundOpcionMenuHorizontalFranjaMenuInstitucional: var(--color--AzulGeneral);
    --colorBackgroundOpcionMenuHorizontalFranjaMenuInstitucionalHover: var(--colorAzulBackground);
    --colorBackgroundPanelBotones: var(--colorBackgroundGeneral); /* panel-botones  es el panel que agrupa los botones del visor */ /* Visor */
    --colorBackgroundBotonPanelBotonesVisor: var(--colorBackgroundPanelBotones); /* Los botones desactivados deben tener el mismo color de panel-botones */
    --colorBackgroundBotonPanelBotonesVisorActivado: var(--colorBackgroundPanelAuxiliar); /* Los botones activados deben tener siempre el mismo color de panel-auxiliar */
    --colorBackgroundPanelDocumento: var(--colorBlanco); /**/
    --colorBackgroundPanelVisor: var(--colorBlanco); /* Visor */
    --colorBackgroundTituloPanelVisor: var(--color--blue-1);
    --colorBackgroundTituloYear: var(--colorCyan);
    --colorBackgroundTituloYearHover: var(--colorNaranja);
    --colorBackgroundYearListaConcordancias: var(--color--blue-1); /* Visor */


    --colorBordeBotonBuscarTextoVisor: var(--color--blue-1); /* Visor */
    --colorBordeBotonBuscarTextoVisorHover: var(--colorNaranja); /* Visor */
    --colorBordeBotonCompuesto: var(--color--blue-1);
    --colorBordeBotonCompuestoHover: var(--colorNaranja);
    --colorBordeBotonNuevaBusquedaTextoVisor: var(--colorCyan); /* Visor */
    --colorBordeBotonNuevaBusquedaTextoVisorHover: var(--colorNaranja); /* Visor */
    --colorBordeBotonPanelBotonesVisor: var(--colorGrisSeparadorOpciones);
    --colorBordeBotonPanelBotonesVisorActivado: var(--color--blue-1); /* Visor */
    --colorBordeBotonPanelBotonesVisorOutline: var(--colorCyan); /* Visor */
    --colorBordeInputCasillaBusquedaVisor: var(--colorBordePanelesVisor); /* Visor */
    --colorBordeInputCasillaBusquedaVisorOutline: var(--colorGrisBordesEspeciales); /* Visor */
    --colorBordeItemListaPanelVisor: var(--colorBordePanelesVisor); /* Visor */
    --colorBordeLetrasAbecedario: var(--color--blue-1);
    --colorBordeLetrasAbecedarioHover: var(--colorNaranja);
    --colorBordeLetrasAbecedarioDesplegadas: var(--colorCyan);
    --colorBordeLetrasAbecedarioDesplegadasHover: var(--colorNaranja);
    --colorBordeOpcionMenuVertical: var(--colorGrisSeparadorOpciones);
    --colorBordePanelMateriasLetras: var(--colorBackgroundGeneral);
    --colorBordeSelector: var(--colorBackgroundGeneral);
    --colorBordeSeparacionMigas: var(--colorGrisSeparadorOpciones);
    --colorBordeSombraFranjaNavegacionVisor: rgba(0,0,0,0.07); /* Visor */
    --colorBordeSombraPanelBotonesVisor: rgba(0,0,0,0.07); /* Visor */
    --colorBordeTituloPanelVisor: var(--color--blue-1); /* Visor */
    --colorBordeTituloYear: var(--colorCyan);
    --colorBordeTituloYearHover: var(--colorNaranja);
    --colorTextoBotonCerrarPanelModal: var(--colorBlanco);
    --colorTextoBotonCerrarPanelModalHover: var(--colorBlanco);
    --colorTextoBotonPanelBotonesVisor: var(--color--blue-2);
    --colorTextoDescripcionPanel: var(--colorGrisTextos);
    --colorTextoDescripcionVisor: var(--colorGrisTextos); /* Visor */
    --colorTextoDescripcionVisorHover: var(--color--blue-2); /* Visor */
    --colorTextoDestacados: var(--colorGrisTextos); /* Visor */
    --colorTextoEntidadVisor: var(--colorGrisTextos); /* Visor */
    --colorTextoFranjaAJ: var(--colorNegroTextos);
    --colorTextoFranjaCiudadano: var(--color--blue-2);
    --colorTextoIdActoTramite: var(--colorGrisTextos); /* Visor */
    --colorTextoIdActoTramiteHover: var(--color--blue-2); /* Visor */
    --colorTextoIdConcordancia: var(--colorGrisTextos); /* Visor */
    --colorTextoIdConcordanciaHover: var(--color--blue-2); /* Visor */
    --colorTextoIdDesarrollo: var(--colorGrisTextos); /* Visor */
    --colorTextoIdDesarrolloHover: var(--color--blue-2); /* Visor */
    --colorTextoIdMemoria: var(--colorGrisTextos); /* Visor */
    --colorTextoIdMemoriaHover: var(--color--blue-2); /* Visor */
    --colorTextoIdModificacion: var(--colorGrisTextos); /* Visor */
    --colorTextoIdModificacionHover: var(--color--blue-2); /* Visor */
    --colorTextoIdNotificacion: var(--colorGrisTextos); /* Visor */
    --colorTextoIdNotificacionHover: var(--color--blue-2); /* Visor */
    --colorTextoItemsListaPanelVisor: var(--colorGrisTextos); /* Visor */
    --colorTextoItemsListaPanelVisorHover: var(--color--blue-2); /* Visor */
    --colorTextoOpcionMenuContextual: var(--colorBlanco);
    --colorTextoOpcionMenuContextualHover: var(--colorBlanco);
    --colorTextoOpcionMenuHorizontalFranjaLogoMenu: var(--colorNegro);
    --colorTextoOpcionMenuHorizontalFranjaLogoMenuHover: var(--colorNaranja);
    --colorTextoTituloLetraAlfabeto: var(--colorBlanco);
    --colorTextoTituloLetraAlfabetoHover: var(--colorBlanco);
    --colorTextoTituloPalabrasClave: var(--colorNegroTextos); /* Visor */
    --colorTextoTituloPanelAuxiliarVisor: var(--colorNegroTextos); /* Visor */
    --colorTextoTituloSeccionMenuLateral: var(--colorNegroTextos);
    --colorTextoTituloSeccionPanel: var(--colorBlanco); /* Visor */
    --colorTextoTituloYear: var(--colorBlanco);
    --colorTextoTituloYearHover: var(--colorBlanco);
    --colorTextosTachados: var(--colorRojo); /* Visor */
    --colorTextosVisor: var(--colorNegroTextos); /* Visor */
    --colorTextoYearVisor: var(--colorGrisTextos); /* Visor */


    --margenImagenOpcion: 20px;
    --letraBotonDescripcionDocumentoNormal: var(--letra16);
    --letraBotonDescripcionDocumentoSmall: var(--letra14);
    --letraBotonGeneralNormal: var(--letra16);
    --letraBotonGeneralSmall: var(--letra14);
    --letraBotonReferenciaADocumentoNormal: var(--letra18);
    --letraBotonReferenciaADocumentoSmall: var(--letra16);
    --letraLetrasNormal: var(--letra16);
    --letraLetrasSmall: var(--letra14);
    --letraYearsNormal: var(--letra16);
    --letraYearsSmall: var(--letra14);
    font-family: var(--fontFamilyGeneral);
    font-size: 100%;
    color: var(--casiNegro);
    font-weight: 400;
    height: 100%;
}


html {
  --scrollbarBG: #132B5E;
  --thumbBG: #FFFFFF;
}

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}

html {
  --scrollbarBG: darkgrey;
  --thumbBG: slategrey;
}

html {
  --scrollbarBG: #F5F5F5;
  --thumbBG: rgba(0,0,0,0.2);
}


body{
  min-height:100%;
  padding:0;
  margin:0;
  position:relative;
}

body {
  background-color: var(--colorBackgroundGeneral);
}

body::after {
  content: '';
  display: block;
  height: 400px;
}


body.busy-cursor {
  cursor: progress;
}



/* Scrollbar styled */

/* https://css-tricks.com/the-current-state-of-styling-scrollbars/ */

::-webkit-scrollbar {
  width: 11px;
}

body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

/* -> Scrollbar styled */


h1, p {
  margin: 0 0 1em 0;
}

.navegacion-modulos {
    padding: 0px 25px 0 75px;
    margin-bottom: 50px;
}