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

html {
  --colorAmarilloIphone: #e9ff70;
  --colorAzul: #01345b;
  --colorAzulBackground: #007cae;
  --colorAzulMuyOscuro: #0e1d33;
  --colorAzulAlterno: #0077bb;
  --colorAzulTitulos: #133e65;
  --colorBlanco: #ffffff;
  --colorCasiBlanco: #f2f6f9;
  --colorEnlaces: rgb(24, 161, 205);
  --colorEnlacesHover: rgb(24, 161, 205);
  --colorEnlacesDocumentos: #007bff;
  --colorEnlacesDocumentosVisitados: #663399;
  --colorGris: #777777;
  --colorGrisBackground: rgba(168, 168, 168, 0.55);
  --colorGrisBackgroundAlterno: #f8f8f8;
  --colorGrisBackgroundBotones: #5d7281;
  --colorGrisBordes: #dedede;
  --colorGrisBordeActivo: #191e2b;
  --colorGrisBordeFooter: rgba(255, 255, 255, 0.4);
  --colorGrisClaro: #f1f1f1;
  --colorGrisMiga: var(--colorGris);
  --colorGrisMigaActiva: #999999;
  --colorGrisOscuro: rgba(11, 18, 31, 0.5);
  --colorGrisSombra: rgba(194, 194, 194, 1);
  --colorGrisTitulos: #777777;
  --colorNaranja: #fb8406; /* Para normas suspendidas */
  --colorNegro: #000000;
  --colorNegroTextos: #212529;
  --colorNegroTitulos: #212121;
  --colorRojo: #ec1d24;
  --colorRojoTachados: var(--colorRojo);
  --colorSinDefinir: var(--colorNegro);
  --colorTextoCasiBlanco: rgba(255, 255, 255, 0.75);
  --colorVerde: #a2b637;
  --colorVerdeBorde: #bdcb3d;


  /* Constantes generales */

  --borderRadiusBotones: 0px; /* Típico: 4px */

  --colorBackgroundGeneral: var(--colorCasiBlanco);

  --colorTextoGeneral: var(--colorNegroTextos);

  --enfasisOpciones: 500;

  --fontFamilyDocumento: 'Merriweather Sans', sans-serif;
  --fontFamilyGeneral: 'Roboto', sans-serif;
  --fontSizeMaterialIconNormal: 24px;
  --fontSizeMaterialIconIrArriba: 20px;

  --letterSpacingBoton: 0.25px;

  --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 */
  --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 */
  --margenVerticalImagenOpcionNormal: 20px;
  --margenVerticalImagenOpcionSmall: 18px;

  /* --> Constantes generales */


  /* franja-jep */

  --colorBackgroundBotonBuscar: var(--colorAzulBackground);
  --colorBackgroundBotonBuscarHover: var(--colorGrisBackground);

  /* --> franja-jep */


  /* franja-modulos */

  --borderRadiusModulos: 0;

  --colorBordeModulo: var(--colorGrisBordes);

  --colorBackgroundBotonVerMasIndex: var(--colorAzulBackground);
  --colorBackgroundBotonVerMasIndexHover: var(--colorGrisBackground);
  --colorBackgroundBotonVerMasIndexTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundContenidoModulos: var(--colorBackgroundGeneral);
  --colorBackgroundFranjaModulos: var(--colorBackgroundGeneral);
  --colorBackgroundModulo: var(--colorVerde);

  --colorSombraModulo: var(--colorGrisSombra);

  --colorTextoBotonVerMasIndex: var(--colorBlanco);
  --colorTextoBotonVerMasIndexHover: var(--colorBlanco);
  --colorTextoDescripcionModulo: var(--colorNegroTextos);
  --colorTextoTituloModulo: var(--colorBlanco);

  --letraDescripcionModuloNormal: var(--letra16); /* Va acompañado de --letraLineHeightDescripcionModuloNormal */
  --letraLineHeightDescripcionModuloNormal: calc(20px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraDescripcionDocumentoNormal */
  --letraDescripcionModuloSmall: var(--letra14); /* Va acompañado de --letraLineHeightDescripcionModuloSmall */
  --letraLineHeightDescripcionModuloSmall: calc(18px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraDescripcionDocumentoSmall */
  --letraTituloModuloNormal: var(--letra18); /* Va acompañado de --letraLineHeightTituloModuloNormal */
  --letraLineHeightTituloModuloNormal: calc(22px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraTituloModuloNormal */
  --letraTituloModuloSmall: var(--letra16); /* Va acompañado de --letraLineHeightTituloModuloSmall */
  --letraLineHeightTituloModuloSmall: calc(20px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraTituloModuloSmall */

  /* --> franja-modulos */


  /* franja-migas */

  --colorBordeSeparacionMigas: var(--colorGrisMigaActiva);

  --colorBackgroundContenidoMigas: var(--colorBackgroundGeneral);
  --colorBackgroundFranjaMigas: var(--colorBackgroundGeneral);

  --colorTextoInicioIcono: var(--colorGrisMigaActiva);
  --colorTextoMiga: var(--colorGrisMiga); /* Es el color normal de las migas */
  --colorTextoMigaActiva: var(--colorGrisMigaActiva); /* Es la miga que tiene <a hred ... */
  --colorTextoMigaActivaHover: var(--colorGrisMigaActiva);
  --colorTextoMigaIcono: var(--colorGrisMigaActiva);
  --colorTextoMigaInicioIcono: var(--colorGrisMigaActiva);

  /* --> franja-migas */


  /* opcion-seleccionada */

  --colorBackgroundIconoOpcionSeleccionada: var(--colorVerde);
  --colorBackgroundOpcionSeleccionada: var(--colorBackgroundGeneral);

  --colorTextoIconoOpcionSeleccionada: var(--colorBlanco);
  --colorTextoDescripcionOpcionSeleccionada: var(--colorNegroTitulos);
  --colorTextoTituloOpcionSeleccionada: var(--colorAzulTitulos);

  --letraTituloH1Normal: var(--letra28);
  --letraTituloH1Small: var(--letra20);
  --letraTituloH2Normal: var(--letra16);
  --letraTituloH2Small: var(--letra14);

  /* --> opcion-seleccionada */


  /* navegacion-nuevas-opciones */

  --colorBordeOpcionNueva: var(--colorGrisBordes);
  --colorBordeOpcionNuevaHover: var(--colorGrisBordes);

  --colorBackgroundBotonVerMas: var(--colorAzulBackground);
  --colorBackgroundBotonVerMasHover: var(--colorGrisBackground);
  --colorBackgroundBotonVerMasTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundImagenOpcionNueva: var(--colorVerde);
  --colorBackgroundImagenOpcionNuevaHover: var(--colorVerde);
  --colorBackgroundNavegacionNuevasOpciones: var(--colorBackgroundGeneral);
  --colorBackgroundOpcionNueva: var(--colorVerde);
  --colorBackgroundOpcionNuevaHover: var(--colorVerde);
  --colorBackgroundOpcionNuevaTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */

  --colorImagenOpcion: var(--colorBlanco);

  --colorTextoBotonVerMas: var(--colorBlanco);
  --colorTextoBotonVerMasHover: var(--colorBlanco);
  --colorTextoIdTipoDocumento: var(--colorTextoTituloOpcionNueva);
  --colorTextoIdTipoDocumentoHover: var(--colorTextoTituloOpcionNuevaHover);
  --colorTextoTituloOpcionNueva: var(--colorBlanco);
  --colorTextoTituloOpcionNuevaHover: var(--colorBlanco);

  --letraOpcionNuevaNormal: var(--letra20); /* Va acompañado de --letraLineHeightOpcionNuevaNormal */
  --letraLineHeightOpcionNuevaNormal: calc(24px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraOpcionNuevaNormal */
  --letraOpcionNuevaSmall: var(--letra16); /* Va acompañado de --letraLineHeightOpcionNuevaSmall */
  --letraLineHeightOpcionNuevaSmall: calc(20px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraOpcionNuevaSmall */

  /* --> navegacion-nuevas-opciones */


  /* opcion-entidad */

  --colorBordeOpcionEntidad: var(--colorGrisBordes);
  --colorBordeOpcionEntidadHover: var(--colorGrisBordes);

  --colorBackgroundImagenOpcionEntidad: var(--colorBlanco);
  --colorBackgroundImagenOpcionEntidadHover: var(--colorBlanco);
  --colorBackgroundOpcionEntidad: var(--colorBlanco);
  --colorBackgroundOpcionEntidadHover: var(--colorBlanco);
  --colorBackgroundPanelListaEntidades: var(--colorBackgroundGeneral);

  --colorImagenOpcionEntidad: var(--colorAzulAlterno);

  --colorTextoIdEntidad: var(--colorAzulAlterno);
  --colorTextoIdEntidadHover: var(--colorAzulAlterno);

  /* --> opcion-entidad */


  /* opcion-nivel-01 */

  --colorBordeOpcionNivel01: var(--colorGrisBordes);
  --colorBordeOpcionNivel01Hover: var(--colorGrisBordes);

  --colorBackgroundImagenOpcionNivel01: var(--colorBlanco);
  --colorBackgroundImagenOpcionNivel01Hover: var(--colorBlanco);
  --colorBackgroundOpcionNivel01: var(--colorBlanco);
  --colorBackgroundOpcionNivel01Hover: var(--colorBlanco);
  --colorBackgroundPanelListaOpcionesNivel01: var(--colorBackgroundGeneral);

  --colorImagenOpcionNivel01: var(--colorAzulAlterno);

  --colorTextoIdOpcionNivel01: var(--colorAzulAlterno);
  --colorTextoIdOpcionNivel01Hover: var(--colorAzulAlterno);

  /* --> opcion-nivel-01 */


  /* panel-selector-year */

  --colorBordeItemListaSelector: var(--colorGrisBordes);
  --colorBordeSelectItems: var(--colorGrisBordes);

  --colorBackgroundItemsSelector: var(--colorGrisBackgroundSelect);
  --colorBackgroundItemsSelectorHover: var(--colorAzulBackground);
  --colorBackgroundPanelSelectorYear: var(--colorBackgroundGeneral);
  --colorBackgroundSelector: var(--colorVerde);

  --colorTextoLabelSelectorYear: var(--colorBlanco);
  --colorTextoSelectYears: var(--colorBlanco);

  --letraSelectorNormal: var(--letra16);

  /* --> panel-selector-year */


  /* navegacion-nuevas-opciones panel-documentos-year */

  --colorBordeOpcionYear: var(--colorGrisBordes);
  --colorBordePanelDocumentosYear: var(--colorGrisBordes);

  --colorBackgroundBotonIrArriba: var(--colorAzulBackground);
  --colorBackgroundBotonIrArribaHover: var(--colorGrisBackground);
  --colorBackgroundBotonIrArribaTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundContenedorPanelDocumentosYear: var(--colorBackgroundGeneral);
  --colorBackgroundImagenOpcionNueva--esDocumento: var(--colorBackgroundOpcionNueva--esDocumento);
  --colorBackgroundImagenOpcionNuevaHover--esDocumento: var(--colorBackgroundOpcionNueva--esDocumentoHover);
  --colorBackgroundImagenOpcionYear: var(--colorVerde);
  --colorBackgroundOpcionNueva--esDocumento: var(--colorBlanco);
  --colorBackgroundOpcionNueva--esDocumentoHover: var(--colorBlanco);
  --colorBackgroundOpcionYear: var(--colorVerde);

  --colorImagenOpcion--esDocumento: var(--colorAzulAlterno);
  --colorImagenOpcionYear: var(--colorBlanco);

  --colorTextoBotonIrArriba: var(--colorBlanco);
  --colorTextoBotonIrArribaHover: var(--colorBlanco);
  --colorTextoDescripcionDocumento: var(--colorNegroTextos);
  --colorTextoIdDocumento: var(--colorAzulAlterno);
  --colorTextoIdDocumentoHover: var(--colorAzulAlterno);
  --colorTextoTituloOpcionYear: var(--colorBlanco);
  --colorTextoTituloOpcionYearHover: var(--colorBlanco);

  --enfasisDocumentos: 500;
  --enfasisYears: 600;

  --letraDescripcionDocumentoNormal: var(--letra18);
  --letraLineHeightDescripcionDocumentoNormal: calc(22px * var(--multiplicadorLetra));
  --letraDescripcionDocumentoSmall: var(--letra16);
  --letraLineHeightDescripcionDocumentoSmall: calc(20px * var(--multiplicadorLetra));

  /* --> navegacion-nuevas-opciones panel-documentos-year */


  /* panel-selector-letra */

  --colorBordeBoxLetras: var(--colorGrisBordes);
  --colorBordeBoxLetrasHover: var(--colorGrisBordes);

  --colorBackgroundLetrasAbecedario: var(--colorVerde);
  --colorBackgroundLetrasAbecedarioHover: var(--colorVerde);
  --colorBackgroundPanelSelectorLetra: var(--colorBackgroundGeneral);

  --colorTextoLetrasAbecedario: var(--colorBlanco);
  --colorTextoLetrasAbecedarioHover: var(--colorBlanco);

  --enfasisLetras: 600;

  /* --> panel-selector-letra */


  /* navegacion-nuevas-opciones panel-materias-letra */

  --colorBordeOpcionEntidad: var(--colorGrisBordes);
  --colorBordeOpcionLetra: var(--colorGrisBordes);
  --colorBordePanelMateriasLetra: var(--colorGrisBordes);

  --colorBackgroundImagenOpcionNueva--esTema: var(--colorBackgroundOpcionNueva--esTema);
  --colorBackgroundImagenOpcionNuevaHover--esTema: var(--colorBackgroundOpcionNueva--esTemaHover);
  --colorBackgroundImagenOpcionLetra: var(--colorVerde);
  --colorBackgroundOpcionLetra: var(--colorVerde);
  --colorBackgroundOpcionNueva--esTema: var(--colorBlanco);
  --colorBackgroundOpcionNueva--esTemaHover: var(--colorBlanco);

  --colorImagenOpcion--esTema: var(--colorAzulAlterno);
  --colorImagenOpcionLetra: var(--colorBlanco);

  --colorTextoIdMateria: var(--colorAzulAlterno);
  --colorTextoIdMateriaHover: var(--colorAzulAlterno);
  --colorTextoTituloOpcionLetra: var(--colorBlanco);
  --colorTextoTituloOpcionLetraHover: var(--colorBlanco);

  /* --> navegacion-nuevas-opciones panel-materias-letra */


  /* opcion-tipo-documento */

  --colorBordeOpcionTipoDocumento: var(--colorGrisBordes);
  --colorBordeOpcionTipoDocumentoHover: var(--colorGrisBordes);

  --colorBackgroundImagenOpcionTipoDocumento: var(--colorBackgroundOpcionTipoDocumento);
  --colorBackgroundImagenOpcionTipoDocumentoHover: var(--colorBackgroundOpcionTipoDocumentoHover);
  --colorBackgroundOpcionTipoDocumento: var(--colorAzulBackground);
  --colorBackgroundOpcionTipoDocumentoHover: var(--colorAzulBackground);
  xxx--colorBackgroundPanelListaEntidades: var(--colorBackgroundGeneral);

  --colorImagenOpcionTipoDocumento: var(--colorBlanco);

  --colorTextoIdTipoDocumento--enTema: var(--colorBlanco);
  --colorTextoIdTipoDocumentoHover--enTema: var(--colorBlanco);

  /* --> opcion-tipo-documento */


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

  --borderRadiusBotonCompuestoNormalVisor: 16px;
  --borderRadiusBotonCompuestoSmallVisor: 15px;
  --borderRadiusBotonSencilloNormalVisor: 16px;
  --borderRadiusBotonSencilloSmallVisor: 15px;
  --borderRadiusCajasValorJuridicoAgregado: 0px;
  --borderRadiusPanelFondoDocumento: 0px; 
  --borderRadiusPanelFondoDocumentoWide: 0px; /* Normalmente 4px */

  --botonVisorCVJAsHeight: var(--botonVisorSencilloNormalSize);
  --botonVisorCVJAsWidth: 300px;
  --botonVisorCompuestoNormalHeight: var(--botonVisorSencilloNormalSize);
  --botonVisorCompuestoSmallHeight: var(--botonVisorSencilloSmallSize);
  --botonVisorSencilloNormalSize: 32px;
  --botonVisorSencilloSmallSize: 30px;

  --enfasisEncabezadoCajasValorJuridicoAgregado: 500;

  --fontFamilyDocumento: 'Merriweather Sans', sans-serif;

  --fontSizeMaterialIconAnotaciones: 20px;
  --fontSizeMaterialIconBotonSencillo: 20px;

  --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;
  --margenRightMaterialIconAnotaciones: 25px;

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

  /* --> visor - medidas */


  /* visor - colores */

  --colorBordeBotonCompuesto: var(--colorBackgroundBotonCompuesto);
  --colorBordeBotonCompuestoHover: var(--colorBackgroundBotonCompuestoHover);
  --colorBordeBotonSencillo: var(--colorBackgroundBotonSencillo); 
  --colorBordeBotonSencilloHover: var(--colorBackgroundBotonSencilloHover); 
  --colorBordeBotonSUINJuriscol: var(--colorBordeBotonSencillo); 
  --colorBordeBotonSUINJuriscolHover: var(--colorBordeBotonSencilloHover); 
  --colorBordeCajasValorJuridicoAgregado: var(--colorGrisBordes); 
  --colorBordePanelDocumento: var(--colorGrisBordes); 
  --colorBordePanelesVisor: var(--colorGrisBordes); 

  --colorBackgroundBotonCerrarPanelModal: var(--colorVerde);
  --colorBackgroundBotonCerrarPanelModalHover: var(--colorVerde);
  --colorBackgroundBotonCompuesto: var(--colorAzulBackground); 
  --colorBackgroundBotonCompuestoTranslucido: var(--colorAzul); 
  --colorBackgroundBotonCompuestoHover: var(--colorGrisBackground); 
  --colorBackgroundBotonSencillo: var(--colorAzulBackground); 
  --colorBackgroundBotonSencilloTranslucido: var(--colorAzul); 
  --colorBackgroundBotonSencilloHover: var(--colorGrisBackground); 
  --colorBackgroundBotonSUINJuriscol: var(--colorBackgroundGeneral);
  --colorBackgroundBotonSUINJuriscolHover: var(--colorBackgroundGeneral); 
  --colorBackgroundContenidoVisor: var(--colorBackgroundGeneral);
  --colorBackgroundEncabezadoCajasValorJuridicoAgregado: var(--colorAzulBackground);
  --colorBackgroundEncabezadoCajasValorJuridicoAgregadoHover: var(--colorGrisBackgroundBotones); 
  --colorBackgroundFranjaNavegacionVisor: var(--colorVerde);
  --colorBackgroundFranjaVisor: var(--colorBackgroundGeneral);
  --colorBackgroundNotasConcordancias: #f6f8f9;
  --colorBackgroundNotasLegislacionAnterior: #fcf5a4;
  --colorBackgroundNotasVigencia: #e8f0fb;
  --colorBackgroundPanelAuxiliar: var(--colorBackgroundGeneral); /* panel-auxiliar es el panel en que se ubican los paneles correspondientes a los botones del visor */
  --colorBackgroundPanelDocumento: var(--colorBlanco); 
  --colorBackgroundPanelFondoDocumento: var(--colorGrisBackgroundAlterno); 
  --colorBackgroundPanelLateralModal: var(--colorBackgroundGeneral);

  --colorImagenBotonSencillo: var(--colorBlanco);

  --colorTextoBoldAJ: var(--colorNegroTextos);
  --colorTextoBoldAJCentrado: var(--colorAzulTitulos);
  --colorTextoBookmarksAJ: var(--colorAzulTitulos);
  --colorTextoBookmarksAJHover: var(--colorAzulTitulos);
  --colorTextoBotonCerrarPanelModal: var(--colorBlanco);
  --colorTextoBotonCompuesto: var(--colorBlanco);
  --colorTextoBotonCompuestoHover: var(--colorBlanco);
  --colorTextoDocumento: var(--colorNegroTextos); 
  --colorTextoEncabezadoCajasValorJuridicoAgregado: var(--colorBlanco);
  --colorTextoEncabezadoCajasValorJuridicoAgregadoHover: var(--colorBlanco);
  --colorTextoLinks: var(--colorEnlacesDocumentos);
  --colorTextoLinksHover: var(--colorEnlacesDocumentos);
  --colorTextoLinksVisited: var(--colorEnlacesDocumentosVisitados);
  --colorTextoTachados: var(--colorRojoTachados);
  --colorTextoTituloDocumentoVisor: var(--colorBlanco);

  /* --> visor - colores */


  /* visor - CVJA e hipervínculos en documentos */

  /* --> visor - CVJA e hipervínculos en documentos */


  /* Visor */

  --altoPanelFondoDocumento: 1814px; /* --altoPanelDocumento + 30px de margen de panel-documento * 2 */ /* Obsoleto */

  --botonVisorNormalSize: 120px; /* Visor */
  --botonVisorBiggerSize: 121px; /* Visor */
  --botonVisorSmallSize: 50px; /* Visor */
  --botonVisorSmallestSize: 40px; /* Visor */

  --margenHorizontalDocumentosNormal: 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 */
                                             /* Visor */
  --margenHorizontalDocumentosSmall: 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 */
                                          /* Visor */

  --colorBackgroundBotonBuscarTextoVisor: var(--colorMoradoMCU);
  --colorBackgroundBotonModalPanelBotonesVisor: var(--colorSinAsignar); /* El visor MCU no usa botones modales */
  --colorBackgroundBotonModalPanelBotonesVisorHover: var(--colorSinAsignar); /* El visor MCU no usa botones modales */
  --colorBackgroundBotonNuevaBusquedaTextoVisor: var(--colorAzulMCU);
  --colorBackgroundBotonPanelBotonesVisor: var(--colorBackgroundPanelBotonesVisor); /* 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 */
  --colorBackgroundBotonSencilloPanelBotonesVisor: var(--colorMoradoMCU); /* Visor */
  --colorBackgroundBotonSencilloPanelBotonesVisorHover: var(--colorAzulMCU); /* Visor */
  --colorBackgroundInputCasillaBusquedaVisor: var(--colorBlanco);
  --colorBackgroundPanelBotonesVisor: var(--colorBackgroundGeneral);  /* Visor */ /* panel-botones  es el panel que agrupa los botones del visor */
  --colorBackgroundPanelDescargas: var(--colorCasiBlanco); /* Visor */
  --colorBackgroundPanelVisor: var(--colorBlanco);
  --colorBackgroundTituloPanelVisor: var(--colorMoradoMCU);
  --colorBackgroundVisor: var(--colorCasiBlanco);

  --colorBordeBotonBuscarTextoVisor: var(--colorBackgroundBotonBuscarTextoVisor);
  --colorBordeBotonBuscarTextoVisorHover: var(--colorBackgroundBotonBuscarTextoVisor);
  --colorBordeBotonNormalPanelBotonesVisor: var(--colorGrisBordes); /* Visor */
  --colorBordeBotonNormalPanelBotonesVisorHover: var(--colorAzulMCU); /* Visor */
  --colorBordeBotonNuevaBusquedaTextoVisor: var(--colorBackgroundBotonNuevaBusquedaTextoVisor);
  --colorBordeBotonNuevaBusquedaTextoVisorHover: var(--colorBackgroundBotonNuevaBusquedaTextoVisor);
  --colorBordeBotonPanelBotonesVisor: var(--colorGrisBordes);
  --colorBordeBotonPanelBotonesVisorActivado: var(--colorAzulMCU);
  --colorBordeBotonPanelBotonesVisorOutline: var(--colorAzulMCUVivo);
  --colorBordeBotonSencilloPanelBotonesVisor: var(--colorBackgroundBotonSencilloPanelBotonesVisor); /* Visor */
  --colorBordeBotonSencilloPanelBotonesVisorHover: var(--colorBackgroundBotonSencilloPanelBotonesVisorHover); /* Visor */
  --colorBordeBotonVisor: var(--colorGrisBordes);
  --colorBordeInputCasillaBusquedaVisor: var(--colorGrisBordes);
  --colorBordeInputCasillaBusquedaVisorOutline: var(--colorAzulMCUVivo);
  --colorBordeItemListaPanelVisor: var(--colorGrisBordes);
  --colorBordeSombraBarraNavegacionVisor: rgba(0,0,0,0.07);
  --colorBordeSombraPanelBotonesVisor: rgba(0,0,0,0.07);
  --colorBordeTituloPanelVisor: var(--colorAzulMCU);

  --colorTextoBotonPanelBotonesVisor: var(--colorAzulMCULetras);
  --colorTextoItemsListaPanelVisor: var(--colorNegroMCU);
  --colorTextoItemsListaPanelVisorHover: var(--colorAzulMCULetrasHover);
  --colorTextoTituloPanelAuxiliarVisor: var(--colorGrisMCULetras);
  --colorTextoTituloPanelVisor: var(--colorBlanco);

  /* -> Visor */

  /* Estilos CVJA e hipervínculos en documentos */

  --colorTextoEncabezadoCVJA: var(--colorBlanco);
  --colorTextoEncabezadoCVJAHover: var(--colorBlanco);

  /* --> Estilos CVJA e hipervínculos en documentos */


  /* Estilos especiales visor */

  --botonVisorNormalSize: 120px;
  --botonVisorBiggerSize: 121px;
  --botonVisorSmallSize: var(--botonVisorSencilloSize);
  --botonPanelBotonesVisorActivadoBorderWidth: 4px; /* Este es el width del borde izquierdo de los botones activados */

  --borderRadiusBotonNormalVisor: 0;

  --borderRadiusPanelesVisor: 10px;

  --panelLateralModalWidth: 400px;

  /* -> Estilos especiales visor */



  --colorBordeBotonAbrirDocumentoIndex: var(--colorGrisBordes);
  --colorBordeBotonBuscarIndex: var(--colorGrisBordes);
  --colorBordeBotonGoBack: var(--colorSinDefinir);
  --colorBordeBotonGoBackAlterno: var(--colorSinDefinir);
  --colorBordeBotonUsabilidad: (--colorVerde);
  --colorBordeBotonUsabilidadHover: (--colorVerde);
  --colorBordeFooter: var(--colorGrisBordeFooter);
  --colorBordeFranjaAJ: var(--colorBlanco);
  --colorBordeInputCasillaBusqueda: var(--colorGrisBordes);
  --colorBordeInputCasillaBusquedaHover: var(--colorGrisBordes);
  --colorBordeItemDocumentosSugeridos: var(--colorGrisBordes);
  --colorBordeItemTerminosSugeridos: var(--colorGrisBordes);
  --colorBordeTituloDocumentosSugeridos: var(--colorGrisBordes);
  --colorBordeTituloTerminosSugeridos: var(--colorGrisBordes);


  --colorBackgroundBotonAbrirDocumento: var(--colorAzulBackground);
  --colorBackgroundBotonAbrirDocumentoHover: var(--colorGrisBackground);
  --colorBackgroundBotonAbrirDocumentoTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundBotonBuscarIndex: var(--colorAzulBackground);
  --colorBackgroundBotonBuscarIndexHover: var(--colorGrisBackground);
  --colorBackgroundBotonBuscarIndexTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundBotonGoBack: var(--colorSinDefinir);
  --colorBackgroundBotonMenuUsabilidad: var(--colorVerde);
  --colorBackgroundBotonMenuUsabilidadHover: var(--colorVerde);
  --colorBackgroundFooter: var(--colorAzulMuyOscuro);
  --colorBackgroundFranjaAJ: var(--colorBlanco);
  --colorBackgroundFranjaGoBack: var(--colorSinDefinir);
  --colorBackgroundFranjaMenuInstitucionalTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundFranjaMenuInstitucional: var(--colorGrisOscuro);
  --colorBackgroundHeader: var(--colorAzul);
  --colorBackgroundMenuVertical: var(--colorAzul);
  /* --colorBackgroundMigas: var(--colorBlanco); */
  --colorBackgroundOpcionMenuContextual: var(--colorVerde);
  --colorBackgroundOpcionMenuContextualHover: var(--colorGrisBackground);
  --colorBackgroundOpcionMenuContextualTranslucido: var(--colorAzul); /* Se usa para lograr el color deseado de hover del botón */
  --colorBackgroundOpcionMenuVertical: var(--colorAzulBackground);
  --colorBackgroundOpcionMenuVerticalHover: var(--colorGrisBackground);
  --colorBackgroundOpcionMenuVerticalVisited: var(--colorAzulBackground);
  --colorBackgroundItemsDocumentosSugeridos: var(--colorBlanco);
  --colorBackgroundItemsDocumentosSugeridosActive: var(--colorBackgroundGeneral);
  --colorBackgroundItemsDocumentosSugeridosHover: var(--colorBackgroundGeneral);
  --colorBackgroundItemsTerminosSugeridos: var(--colorBlanco);
  --colorBackgroundItemsTerminosSugeridosActive: var(--colorBackgroundGeneral);
  --colorBackgroundItemsTerminosSugeridosHover: var(--colorBackgroundGeneral);
  --colorBackgroundTituloDocumentosSugeridos: var(--colorVerde);
  --colorBackgroundTituloKeywords: var(--colorAmarilloIphone);
  --colorBackgroundTituloMagistrado: var(--colorAmarilloIphone);
  --colorBackgroundTituloPalabrasClaves: var(--colorNaranja);
  --colorBackgroundTituloResumenAutomatizado: var(--colorNaranja);
  --colorBackgroundTituloSintesisCaso: var(--colorAmarilloIphone);
  --colorBackgroundTituloSumilla: var(--colorAmarilloIphone);
  --colorBackgroundTituloTerminosSugeridos: var(--colorVerde);

  --colorIconoMenuInstitucional: var(--colorBlanco);

  --colorTextoBotonAbrirDocumentoSugerido: var(--colorBlanco);
  --colorTextoBotonBuscar: var(--colorBlanco);
  --colorTextoBotonGoBack: var(--colorSinDefinir);
  --colorTextoBotonGoBackHover: var(--colorSinDefinir);
  --colorTextoBotonMenuUsabilidad: var(--colorBlanco);
  --colorTextoBotonMenuUsabilidadHover: var(--colorBlanco);
  --colorTextoBotonVerMasMenuContextual: var(--colorBlanco); /* No se usa */
  --colorTextoBotonVerMasMenuContextualHover: var(--colorBlanco); /* No se usa */
  --colorTextoCasillaBuscar: var(--colorNegroTextos);
  --colorTextoEnlacesFranjaAJ: var(--colorEnlaces);
  --colorTextoEnlacesFranjaAJHover: var(--colorEnlacesHover);
  --colorTextoFooter: var(--colorBlanco);
  --colorTextoFranjaAJ: var(--colorNegroTextos);
  --colorTextoFranjaMenuInstitucional: var(--colorBlanco);
  --colorTextoItemsDocumentosSugeridos: var(--colorNegroTextos);
  --colorTextoItemsDocumentosSugeridosActive: var(--colorNegroTextos);
  --colorTextoItemsDocumentosSugeridosHover: var(--colorNegroTextos);
  --colorTextoItemsTerminosSugeridos: var(--colorNegroTextos);
  --colorTextoItemsTerminosSugeridosActive: var(--colorNegroTextos);
  --colorTextoItemsTerminosSugeridosHover: var(--colorNegroTextos);
  --colorTextoOpcionMenuContextual: var(--colorBlanco);
  --colorTextoOpcionMenuContextualHover: var(--colorBlanco);
  --colorTextoOpcionMenuVertical: var(--colorBlanco);
  --colorTextoOpcionMenuVerticalHover: var(--colorBlanco);
  --colorTextoOpcionMenuVerticalVisited: var(--colorGrisTitulos);
  --colorTextoTituloAuxiliar: var(--colorNegroTitulos);
  --colorTextoTituloDocumentosSugeridos: var(--colorBlanco);
  --colorTextoTituloKeywords: var(--colorNegro);
  --colorTextoTituloMagistrado: var(--colorNegro);
  --colorTextoTituloPalabrasClaves: var(--colorBlanco);
  --colorTextoTituloPrincipal: var(--colorAzulTitulos);
  --colorTextoTituloResumenAutomatizado: var(--colorBlanco);
  --colorTextoTituloSeccionMenuLateral: var(--colorAzulTitulos);
  --colorTextoTituloSumilla: var(--colorNegro);
  --colorTextoTituloSintesisCaso: var(--colorNegro);
  --colorTextoTitulosFranjaAJ: var(--colorNegroTitulos);
  --colorTextoTituloTerminosSugeridos: var(--colorBlanco);


  --colorFondoBotonBuscarTexto: var(--colorAzul);
  --colorFondoBotonNuevaBusqueda: var(--colorAzulMuyOscuro);
  --colorFondoBotonVerMas: var(--colorAzul);
  --colorFondoBotonVerMasHover: var(--colorAzulMuyOscuro);
  --colorFondoCVJA: var(--colorAzul);
  --colorFondoCVJAHover: var(--colorGrisClaro);
  --colorFondoConcordancias: #cbd7e1; /* Sacado de: https://co.pinterest.com/pin/816699713663926097/ */
  --colorFondoIDEntidad: var(--colorFondoOpcionNueva);
  --colorFondoIDEntidadHover: var(--colorFondoOpcionNuevaHover);
  --colorFondoIDTipoDocumento: var(--colorFondoOpcionNueva);
  --colorFondoIDTipoDocumentoHover: var(--colorFondoOpcionNuevaHover);
  --colorFondoLegislacionAnterior: #f9f29c;
  --colorFondoNotasVigencia: #b3e5f6;
  --colorFondoOpcionNueva: var(--colorBlanco);
  --colorFondoOpcionNuevaHover: var(--colorGrisClaro);
  --colorFondoSelector: var(--colorAzul);
  --colorFondoTituloPanel: var(--colorAzul);

  --colorTextoBotonMateria: var(--colorAzulMuyOscuro);
  --colorTextoBotonOpcionNivel01: var(--colorAzulMuyOscuro);
  --colorTextoBotonOpcionNivel01Hover: var(--colorAzulMuyOscuro);
  --colorTextoCVJA: var(--colorBlanco);
  --colorTextoCVJAHover: var(--colorAzulMuyOscuro);
  --colorTextFooter: var(--colorTextoCasiBlanco);
  /* --colorTextoIdOpcionNivel01: var(--colorAzulMuyOscuro); */
  /* --colorTextoIdOpcionNivel01Hover: var(--colorAzulMuyOscuro); */
  --colorTextoRespuesta: var(--colorAzulMuyOscuro);



  /* --colorMiga: #999999; */
  /* --colorMigaActiva: #999999; */
  --colorTextoBotonDocumento: #000000;
  --colorTextoBotonOpcion: #ffffff;
  --colorTextoBotonTipoDocumento: #ffffff;
  --fondoExplicacion: #06233d;
  --fondoFooter: #1a1e2a;
  --fondoNavegacionLogo: #01345b;
  /* --fondoNavegacionMigas: #ffffff; */
  --fondoOpcionNueva: #0b121f;
  --fondoVerMas: #a2b637;

  --bordeAzulClaro: #0074D5;
  --bordeAzulOscuro: #20479D;
  --bordeBotonVisor: #D8D8D8;
  --bordeGrisClaro: #D3D8DB;
  --bordeGris: #D5D8DB;
  --bordePanelDocumento: #D4D8DB;
  --casiNegro: #4d4d4d;
  --colorAzulOscuro: #20479D;
  --colorCornisaClaro: #8dc000;
  --colorCornisaNormal: #3cae48;
  --colorCornisaOscuro: #1d5f33;
  --colorLetrasAlfabeto: #ffffff;
  --colorLetrasAlfabetoHover: #ffffff;
  --colorPanelFondoDocumento: #FAFBFC;
  --colorTextoBotonEntidad: #4d4d4d;
  --colorTextoEnlace: #20479D;
  --colorTextoEnlaceHover: #EC1D24;
  --colorTextoTituloLetraAlfabeto: #ffffff;
  --colorVerdeSNS: #198820;
  --destacados: #727475;
  --fondoAzulClaro: #0074D5;
  --fondoAzulNoche: #132B5E;
  --fondoAzulOscuro: #20479D;
  --fondoBlanco: #FFFFFF;
  --fondoBotonBusqueda: #1d5f33;
  --fondoBotonNuevaBusqueda: #3cae48;
  --fondoBotonSencillo: #F5F8FA;
  --fondoBotonVerde: #205e35;
  --fondoGrisAzuloso: rgba(24,69,163,0.1);
  --fondoGrisCasiBlanco: #FAFBFC;
  --fondoGrisClaro: #EFF3F6;
  --fondoGrisLinearGradient: #F2F4F7;
  --fondoGrisMenosClaro: #EEF3F6;
  --fondoIcono: #EFF3F6;
  --fondoLetrasAlfabeto: #a2b637;
  --fondoLetrasAlfabetoHover: #4d4d4d;
  --fondoNormograma: #198820;
  --fondoOpcionNuevaHover: #d2f0d5;
  --fondoRojo: #EC1D24;
  --fondoTituloLetraAlfabeto: #a2b637;
  --fondoTituloPanel: #198820; /* Título de páneles correspondientes a botones del visor */
  --outlineAzulOscuro: #20479D;
  --outlineCasiNegro: #343536;
  --outlineRojo: #ec1d24;

  --colorBackgroundImagenRespuesta: var(--colorBlanco);
  --colorBackgroundImagenRespuestaHover: var(--colorGrisClaro);
  --colorBackgroundBotonOpcionNivel01: var(--colorBlanco);
  --colorBackgroundBotonOpcionNivel01Hover: var(--colorGrisClaro);
  --colorBackgroundPanelRespuesta: var(--colorBlanco);
  --colorBackgroundPanelRespuestaHover: var(--colorGrisClaro);
  --colorBackgroundTextoRespuesta: var(--colorBlanco);
  --colorBackgroundTituloYear: var(--colorBlanco);


  --multiplicadorLetra: 1;

  --letra5: calc(5px * var(--multiplicadorLetra));
  --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(28px * var(--multiplicadorLetra));
  --letra30: calc(30px * var(--multiplicadorLetra));
  --letra32: calc(32px * var(--multiplicadorLetra));
  --letra36: calc(36px * var(--multiplicadorLetra));

  --letraBotonDescripcionDocumentoNormal: var(--letra16);
  --letraBotonDescripcionDocumentoSmall: var(--letra14);
  --letraBotonGeneralNormal: var(--letra16);
  --letraBotonGeneralSmall: var(--letra14);
  --letraBotonReferenciaADocumentoNormal: var(--letra18);
  --letraBotonReferenciaADocumentoSmall: var(--letra16);
  --letraLetrasNormal: var(--letra16);
  --letraLetrasSmall: var(--letra14);
  --letraOpcionNivel01Normal: var(--letra16);
  --letraOpcionNivel01Small: var(--letra14);
  --letraTituloNormogramaH1Normal: var(--letra28);
  --letraTituloNormogramaH1Small: var(--letra20);
  --letraTituloH1PrincipalNormal: var(--letra26);
  --letraTituloH1PrincipalSmall: var(--letra24);
  --letraTituloH2AuxiliarNormal: var(--letra18);
  --letraTituloH2AuxiliarSmall: var(--letra16);
  --letraTituloH3Normal: var(--letra12);
  --letraTituloH3Small: var(--letra10);
  --letraYearsNormal: var(--letra16);
  --letraYearsSmall: var(--letra14);

  --fontSizeMaterialIconBotonVisor: 24px;
  --fontSizeMaterialIconCerrar: 20px;

  --margenRightMaterialIconBuscar: 25px;

  --borderRadiusPanelesVisor: 10px;
  --enfasisModulos: 500;
  --enfasisTituloPrincipal: 700;

  font-family: var(--fontFamilyGeneral);
  font-size: var(--letra18);
  color: var(--colorTextoGeneral);
  font-weight: 400;
  height: 100%;
}

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

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

/* -> Scrollbar styled */

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

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

body::after {
  content: '';
  display: block;
  clear: both;
  height: 500px; /* Set same as footer's height */  /* 60px + 550px */
}

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

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

@media screen and (min-width: 1100px) {
  body::after {
  }
}

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

body.busy-cursor {
  cursor: progress;
}


/* Scrollbar styled */

::-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 */