* {
  -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: #125e81;
  --color--blue-12: #f5f9ff;
  --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--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--igualdad: #d23c78; /* Color sector igualdad */
  --color--red: #a80521;
  
  --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: #14b8ce;
  --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;
  /* ********* */


  /* 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);

  --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;

  --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-2);

  --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;

  /* -> franja-logo-buscador */
  


  /* franja-menu-institucional */

  --bordeOpcionMenuVertical: 1px solid var(--colorBordeOpcionMenuVertical);

  --colorBackgroundFranjaMenuInstitucional: var(--colorBackgroundGeneral); /* 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(--color--gray-1);
  --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 */


  /* 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-1);
	--colorBordeBotonUsabilidadHover: var(--color--blue-1);

  --colorBackgroundBotonMenuUsabilidad: var(--color--blue-2);
  --colorBackgroundBotonMenuUsabilidadHover: var(--color--blue-1);
  --colorBackgroundMenuUsabilidad: var(--colorBackgroundGeneral);

  --colorTextoBotonMenuUsabilidad: var(--colorBlanco);
  --colorTextoBotonMenuUsabilidadHover: var(--colorBlanco);

  /* -> Usabilidad */




  --colorBackgroundBotonNuevaBusquedaTextoVisor: var(--colorCyan); /* 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: 1410px;
}

@media screen and (min-width: 400px) {
  body::after {
    height: 1360px;
  }
}

@media screen and (min-width: 576px) {
  body::after {
    height: 1130px;
  }
}

@media screen and (min-width: 768px) {
  body::after {
    height: 1130px;
  }
}

@media screen and (min-width: 992px) {
  body::after {
    height: 1020px;
  }
}

@media screen and (min-width: 1200px) {
  body::after {
    height: 750px;
  }
}

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;
}