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

a {
  text-decoration: none;
}

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

html {
  --colorAzulBackground: #2b71ff;
  --colorAzulCielo: #6698FF;
  --colorAzulEspecial: rgba(255, 255, 255, 0.1) !important;
  --colorAzulLinks: #2b71ff;
  --colorAzulOscuro: #004a99;
  --colorAzulPalido: rgba(51, 152, 220, 0.1) !important;
  --colorAzulTextos: var(--colorAzulOscuro);
  --colorBlanco: #ffffff;
  --colorBlancoEspecial: rgba(255, 255, 255, 0.8) !important;
  --colorCyan: #00bed6;
  --colorEnlaces: #555555;
  --colorEnlacesHover: #004a97;
  --colorGrisBackground: #f0f8ff;
  --colorGrisBackgroundSelect: #eaeaea;
  --colorGrisClaro: #f1f1f1;
  --colorGrisLinea: #eeeeee;
  --colorGrisOscuro: #535353;
  --colorGrisSeparadorOpciones: #dadada;
  --colorGrisSombra: #eaeaea;
  --colorGrisTextos: var(--colorGrisOscuro);
  --colorNaranja: #fb8406; /* Para normas suspendidas */
  --colorNaranjaClaro: #fecc0d;
  --colorNaranjaBackground: #eb8d00;
  --colorNegro: #000000;
  --colorNegroAlterno: #292929;
  --colorNegroTextos: #272833;
  --colorNegroTitulos: #333333;
  --colorOpcionesMenu: #555555;
  --colorOpcionesMenuHover: #272833;
  --colorOpcionesMenuVisited: #003b87;
  --colorRojo: #ec1d24;
  --colorSinDefinir: var(--colorNegro);
  --colorVerdeBackground: #c8c916;
  --colorVerdePalido: rgba(113, 209, 211, 0.3);
  --colorVerdeICFES:#26b846;

  --colorBordeBotonCompuesto: var(--colorSinDefinir);
  --colorBordeBotonCompuestoHover: var(--colorSinDefinir);
  --colorBordeBotonGoBack: var(--colorSinDefinir);
  --colorBordeBotonGoBackAlterno: var(--colorSinDefinir);
  --colorBordeBotonPanelBotonesVisor: var(--colorGrisSeparadorOpciones);
  --colorBordeBotonPanelBotonesVisorActivado: var(--colorAzulCielo); /* Visor */
  --colorBordeBotonPanelBotonesVisorOutline: var(--colorCyan); /* Visor */
  --colorBordeBotonSencillo: var(--colorSinDefinir); /* Visor */
  --colorBordeBotonSencilloHover: var(--colorSinDefinir); /* Visor */
  --colorBordeBotonVerMas: var(--colorSinDefinir);
  --colorBordeBotonVerMasHover: var(--colorSinDefinir);
  --colorBordeBotonVerMasIndex: var(--colorSinDefinir);
  --colorBordeBotonVerMasIndexHover: var(--colorSinDefinir);
  --colorBordeCajasValorJuridicoAgregado: var(--colorGrisSeparadorOpciones);
  --colorBordeFranjaAJ: var(--colorBlanco);
  --colorBordeInformacionDefensoria: var(--colorAzulEspecial);
  --colorBordeItemListaSelector: var(--colorGrisSeparadorOpciones);
  --colorBordeLetrasAbecedario: var(--colorSinDefinir);
  --colorBordeLetrasAbecedarioHover: var(--colorSinDefinir);
  --colorBordeLetrasAbecedarioDesplegadas: var(--colorSinDefinir);
  --colorBordeLetrasAbecedarioDesplegadasHover: var(--colorSinDefinir);
  --colorBordeModulo: var(--colorGrisClaro);
  --colorBordeModuloHover: var(--colorGrisClaro);
  --colorBordeOpcionEntidad: var(--colorGrisClaro);
  --colorBordeOpcionEntidadHover: var(--colorGrisClaro);
  --colorBordeOpcionLetra: var(--colorGrisClaro);
  --colorBordeOpcionLetraHover: var(--colorGrisClaro);
  --colorBordeOpcionNueva: var(--colorGrisClaro);
  --colorBordeOpcionNuevaHover: var(--colorGrisClaro);
  --colorBordeOpcionTipoDocumento: var(--colorGrisClaro);
  --colorBordeOpcionTipoDocumentoHover: var(--colorGrisClaro);
  --colorBordeOpcionYear: var(--colorGrisClaro);
  --colorBordeOpcionYearHover: var(--colorGrisClaro);
  --colorBordePanelDocumento: var(--colorBordePanelesVisor); /* Visor */
  --colorBordeSelector: var(--colorBackgroundGeneral);
  --colorBordeSeparacionMigas: var(--colorAzulOscuro);
  --colorBordeSombraPanelBotonesVisor: rgba(0, 0, 0, 0.07); /* Visor */
  --colorBordePanelesVisor: var(--colorGrisClaro); /* Visor */
  --colorBordeTituloInformacionDefensoria: var(--colorBlanco);


  --colorSombraOpcionNueva: var(--colorGrisSombra);


  --colorBackgroundBotonBuscar: var(--colorAzulBackground);
  --colorBackgroundBotonBuscarHover: var(--colorGrisOscuro);
  --colorBackgroundBotonCerrarPanelModal: var(--colorAzulBackground); /* Visor */
  --colorBackgroundBotonCerrarPanelModalHover: var(--colorAzulBackground); /* Visor */
  --colorBackgroundBotonCompuesto: var(--colorAzulOscuro); /* Visor */
  --colorBackgroundBotonCompuestoHover: var(--colorGrisOscuro); /* Visor */
  --colorBackgroundBotonEmpiezaAqui: var(--colorAzulOscuro);
  --colorBackgroundBotonEmpiezaAquiHover: var(--colorAzulOscuro); /* No cambia al hacer hover porque el botón no está activo */
  --colorBackgroundBotonGoBack: var(--colorSinDefinir);
  --colorBackgroundBotonIrArriba: var(--colorNaranjaBackground);
  --colorBackgroundBotonIrArribaHover: var(--colorGrisOscuro);
  --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 */
  --colorBackgroundBotonPanelBotonesSmallVisor: var(--colorAzulOscuro); /* Visor */
  --colorBackgroundBotonPanelBotonesSmallVisorHover: var(--colorGrisOscuro); /* Visor */
  --colorBackgroundBotonSencillo: var(--colorAzulOscuro); /* Visor */
  --colorBackgroundBotonSencilloHover: var(--colorGrisOscuro); /* Visor */
  --colorBackgroundBotonSUINJuriscol: var(--colorBlanco); /* Visor */
  --colorBackgroundBotonSUINJuriscolHover: var(--colorGrisBackground); /* Visor */
  --colorBackgroundBotonVerMas: var(--colorAzulBackground);
  --colorBackgroundBotonVerMasHover: var(--colorGrisOscuro);
  --colorBackgroundBotonVerMasIndex: var(--colorAzulBackground);
  --colorBackgroundBotonVerMasIndexHover: var(--colorGrisOscuro);
  --colorBackgroundContenidoMigas: var(--colorBackgroundGeneral);
  --colorBackgroundEncabezadoCajasValorJuridicoAgregado: var(--colorAzulBackground); /* Visor */
  --colorBackgroundEncabezadoCajasValorJuridicoAgregadoHover: var(--colorGrisOscuro); /* Visor */
  --colorBackgroundExplicacionOpcionSeleccionada: var(--colorSinDefinir);
  --colorBackgroundFranjaAJ: var(--colorBlanco);
  --colorBackgroundFranjaGoBack: var(--colorSinDefinir);
  --colorBackgroundFranjaMenuInstitucional: var(--colorAzulPalido);
  --colorBackgroundFranjaMigas: var(--colorBackgroundGeneral);
  --colorBackgroundFranjaNavegacionVisor: var(--colorAzulBackground); /* Visor */
  --colorBackgroundFranjaUsabilidadHeader: var(--colorAzulCielo);
  --colorBackgroundGeneral: var(--colorBlanco);
  --colorBackgroundIconoOpcionSeleccionada: var(--colorAzulOscuro);
  --colorBackgroundIconoRedesFooter: var(--colorAzulEspecial);
  --colorBackgroundIconoRedesFooterHover: transparent;
  --colorBackgroundImagenOpcionEntidad: var(--colorNaranjaBackground);
  --colorBackgroundImagenOpcionEntidadHover: var(--colorNaranjaBackground);
  --colorBackgroundImagenOpcionLetra: var(--colorNaranjaBackground);
  --colorBackgroundImagenOpcionLetraHover: var(--colorNaranjaBackground);
  --colorBackgroundImagenOpcionNueva: var(--colorAzulOscuro);
  --colorBackgroundImagenOpcionNuevaHover: var(--colorAzulOscuro);
  --colorBackgroundImagenOpcionTipoDocumento: var(--colorVerdeBackground);
  --colorBackgroundImagenOpcionTipoDocumentoHover: var(--colorVerdeBackground);
  --colorBackgroundImagenOpcionYear: var(--colorNaranjaBackground);
  --colorBackgroundImagenOpcionYearHover: var(--colorNaranjaBackground);
  --colorBackgroundItemsSelector: var(--colorGrisBackgroundSelect);
  --colorBackgroundItemsSelectorHover: var(--colorAzulBackground);
  --colorBackgroundLetrasAbecedario: var(--colorAzulOscuro);
  --colorBackgroundLetrasAbecedarioHover: var(--colorGrisOscuro);
  --colorBackgroundLetrasAbecedarioDesplegadas: var(--colorSinDefinir);
  --colorBackgroundLetrasAbecedarioDesplegadasHover: var(--colorSinDefinir);
  --colorBackgroundMenuVertical: var(--colorBlanco);
  --colorBackgroundModulo: var(--colorBlanco);
  --colorBackgroundModuloHover: var(--colorBlanco);
  --colorBackgroundNotasConcordancias: var(--colorGrisBackground); /* Visor */
  --colorBackgroundNotasLegislacionAnterior: #f0e983;
  --colorBackgroundNotasVigencia: var(--colorAzulPalido);
  --colorBackgroundOpcionEntidad: var(--colorGrisBackground);
  --colorBackgroundOpcionEntidadHover: var(--colorGrisBackground);
  --colorBackgroundOpcionEntidadAlterno: var(--colorBlanco);
  --colorBackgroundOpcionEntidadAlternoHover: var(--colorBlanco);
  --colorBackgroundOpcionLetra: var(--colorGrisBackground);
  --colorBackgroundOpcionLetraHover: var(--colorGrisBackground);
  --colorBackgroundOpcionMenuVertical: var(--colorBlanco);
  --colorBackgroundOpcionMenuVerticalHover: var(--colorAzulPalido);
  --colorBackgroundOpcionMenuVerticalVisited: var(--colorAzulPalido);
  --colorBackgroundOpcionNueva: var(--colorBlanco);
  --colorBackgroundOpcionNuevaHover: var(--colorBlanco);
  --colorBackgroundOpcionTipoDocumento: var(--colorVerdePalido);
  --colorBackgroundOpcionTipoDocumentoHover: var(--colorVerdePalido);
  --colorBackgroundOpcionYear: var(--colorGrisBackground);
  --colorBackgroundOpcionYearHover: var(--colorGrisBackground);
  --colorBackgroundOpcionSeleccionada: var(--colorAzulBackground);
  --colorBackgroundPanelAuxiliar: var(--colorBlanco); /* 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 */
  --colorBackgroundPanelBotones: var(--colorBackgroundGeneral); /* panel-botones  es el panel que agrupa los botones del visor */ /* Visor */
  --colorBackgroundPanelLateralModal: var(--colorBlanco); /* Visor */
  --colorBackgroundPanelDocumento: var(--colorBlanco);
  --colorBackgroundPanelFondoDocumento: var(--colorGrisBackground);
  --colorBackgroundPanelSelectorYear: var(--colorBackgroundGeneral);
  --colorBackgroundSelector: var(--colorGrisBackgroundSelect);
  --colorBackgroundTituloPanelVisor: var(--colorAzulBackground);
  --colorBackgroundTituloYear: var(--colorGrisBackground);
  --colorBackgroundTituloYearHover: var(--colorGrisBackground);



  --colorTextoBoldAJ: var(--colorAzulTextos); /* Visor */
  --colorTextoBookmarksAJ: var(--colorAzulTextos); /* Visor */
  --colorTextoBookmarksAJHover: var(--colorAzulTextos); /* Visor */
  --colorTextoBotonBuscar: var(--colorBlanco);
  --colorTextoBotonBuscarHover: var(--colorBlanco);
  --colorTextoBotonCerrarPanelModal: var(--colorBlanco);
  --colorTextoBotonCerrarPanelModalHover: var(--colorBlanco);
  --colorTextoBotonCompuesto: var(--colorBlanco);
  --colorTextoBotonCompuestoHover: var(--colorBlanco);
  --colorTextoBotonEmpiezaAqui: var(--colorBlanco);
  --colorTextoBotonEmpiezaAquiHover: var(--colorBlanco);
  --colorTextoBotonGoBack: var(--colorSinDefinir);
  --colorTextoBotonGoBackHover: var(--colorSinDefinir);
  --colorTextoBotonIrArriba: var(--colorBlanco);
  --colorTextoBotonIrArribaHover: var(--colorBlanco);
  --colorTextoBotonSencillo: var(--colorBlanco);
  --colorTextoBotonSencilloHover: var(--colorBlanco);
  --colorTextoBotonVerMas: var(--colorBlanco);
  --colorTextoBotonVerMasHover: var(--colorBlanco);
  --colorTextoBotonVerMasIndex: var(--colorBlanco);
  --colorTextoBotonVerMasIndexHover: var(--colorBlanco);
  --colorTextoBotonVisor: var(--colorAzulTextos); /* Visor */
  --colorTextoCopyright: var(--colorBlancoEspecial);
  --colorTextoDescripcionDocumento: var(--colorGrisTextos);
  --colorTextoDescripcionDocumentoHover: var(--colorGrisTextos);
  --colorTextoDescripcionModulo: var(--colorGrisTextos);
  --colorTextoDescripcionOpcionSeleccionada: var(--colorBlanco);
  --colorTextoDocumento: var(--colorNegroTextos); /* Visor */
  --colorTextoEncabezadoCajasValorJuridicoAgregado: var(--colorBlanco); /* Visor */
  --colorTextoEncabezadoCajasValorJuridicoAgregadoHover: var(--colorBlanco); /* Visor */
  --colorTextoEnlacesFranjaAJ: var(--colorEnlaces);
  --colorTextoEnlacesFranjaAJHover: var(--colorEnlacesHover);
  --colorTextoEnlacesInteresHover: var(--colorNaranjaClaro);
  --colorTextoEspecialFooter: var(--colorCyan);
  --colorTextoExplicacionOpcionSeleccionada: var(--colorSinDefinir);
  --colorTextoFranjaAJ: var(--colorNegroTextos);
  --colorTextoHeaderHerramientas: var(--colorBlanco);
  --colorTextoHeaderHerramientasHover: var(--colorAzulTextos);
  --colorTextoIdDocumento: var(--colorGrisTextos);
  --colorTextoIdDocumentoHover: var(--colorGrisTextos);
  --colorTextoIdEntidad: var(--colorGrisTextos);
  --colorTextoIdEntidadHover: var(--colorGrisTextos);
  --colorTextoIdMateria: var(--colorAzulTextos);
  --colorTextoIdMateriaHover: var(--colorAzulTextos);
  --colorTextoIdTipoDocumento: var(--colorAzulTextos);
  --colorTextoIdTipoDocumentoHover: var(--colorAzulTextos);
  --colorTextoIdTipoDocumentoAlterno: var(--colorGrisTextos);
  --colorTextoIdTipoDocumentoAlternoHover: var(--colorGrisTextos);
  --colorTextoInformacionDefensoria: var(--colorBlanco);
  --colorTextoInformacionDefensoriaEspecial: var(--colorBlancoEspecial);
  --colorTextoInicioIcono: var(--colorAzulBackground);
  --colorTextoLinks: var(--colorAzulLinks); /* Visor */
  --colorTextoLinksHover: var(--colorGrisTextos); /* Visor */
  --colorTextoMiga: var(--colorAzulTextos);
  --colorTextoMigaActiva: var(--colorAzulTextos); /* Es la que tiene el hipervínculo */
  --colorTextoMigaActivaHover: var(--colorAzulTextos);
  --colorTextoMigaIcono: var(--colorAzulBackground);
  --colorTextoMigaInicioIcono: var(--colorAzulBackground);
  --colorTextoNotificacionesJudicialesHover: var(--colorNaranjaClaro);
  --colorTextoOpcionMenuHorizontalFranjaMenuInstitucional: var(--colorOpcionesMenu);
  --colorTextoOpcionMenuHorizontalFranjaMenuInstitucionalHover: var(--colorOpcionesMenuHover);
  --colorTextoOpcionMenuHorizontalFranjaMenuInstitucionalVisited: var(--colorOpcionesMenuVisited);
  --colorTextoOpcionMenuVertical: var(--colorOpcionesMenu);
  --colorTextoOpcionMenuVerticalHover: var(--colorOpcionesMenuHover);
  --colorTextoOpcionMenuVerticalVisited: var(--colorOpcionesMenuVisited);
  --colorTextoTituloPrincipal: var(--colorAzulTextos);
  --colorTextoSelectYears: var(--colorGrisTextos);
  --colorTextoSelectYearsHover: var(--colorBlanco);
  --colorTextoTituloInformacionDefensoria: var(--colorTextoInformacionDefensoria);
  --colorTextoTituloModulo: var(--colorNegroAlterno);
  --colorTextoTituloModuloHover: var(--colorAzulTextos);
  --colorTextoTituloNormograma: var(--colorAzulTextos);
  --colorTextoTituloOpcionNueva: var(--colorAzulTextos);
  --colorTextoTituloOpcionNuevaHover: var(--colorAzulTextos);
  --colorTextoTituloOpcionYear: var(--colorGrisTextos);
  --colorTextoTituloOpcionYearHover: var(--colorGrisTextos);
  --colorTextoTituloOpcionSeleccionada: var(--colorBlanco);
  --colorTextoTituloVisor: var(--colorBlanco); /* Visor */
  --colorTextoTitulosFranjaAJ: var(--colorNegroTitulos);
  --colorTextoTitulosPrincipales: var(--colorBlanco);
  --colorTextosTachados: var(--colorRojo); /* Visor */





  --colorAzul: #36c;
  --colorAzulClaro: #e6effd;
  --colorAzulGovCo: #3366cc;
  --colorCyan: #14b8ce;
  --colorCyanClaro: #5ac1dd;
  --colorGrisBordesEspeciales: #ccc;
  --colorGrisClaroAlterno: #dededf; /* Usado en franja-estar-mas-cerca */
  --colorGrisClaroVerdoso: #e6f0fd;
  --colorGrisIconos: #8e8e8e;
  --colorGrisMuyClaro: #f4f4f4;
  --colorGrisMuyClaroAlterno: #e1e1e2; /* #fafbfc; */
  --colorGrisTextos: #535353;
  --colorGrisTextosAlterno: #575757; /* Usado en franja-contactos */
  --colorGrisTextosAlternoOtros: #4b4b4b; /* Usado en franja-contactos */
  --colorGrisTextosAlternoOtrosMas: #B5B5B5; /* Usado en franja-contactos */
  --colorNaranjaAlterno: #ff8403; /* En menú */
  --colorNegroTextos: #1e1e1e;
  --AzulClaroddp:#2B71FF;

  --grisFranja: #eaf4fb;
  --colorAzulOscuroDefensoriaDelPueblo: #004a97;
  --colorGrisClaroDefensoria: #ddd;
  --colorGrisLetraFooter: #ffffffcc;
  --colorCyan: #00bed6;
  --colorCyanVariante: #9be0e9;
  --colorAzulOscuroDefensoriaDelPuebloSub: #1a5ca2;
  --colorGrisClaroMacas: rgba(255, 255, 255, 0.8);
  --colorAzulReyClaro: #1a5ca2;
  --colorAmarilloQuemado: #fecc0d;
  --TextoAzul: #004a97;
  --colorAzulClaroDefensoriaDelPueblo:var(--AzulClaroddp); /* GC */
  --TextoAzulGovCo: var(--TextoAzul);
  --colorBlancoHeader: var(--colorBlanco);
  --colorBacgroundGrisDefesoria: var(--grisFranja);
  --colorSocialMedia: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorLineaSeparadorFooter: var(--colorGrisClaroDefensoria);
  --colorBackgroundFooter: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorAzulContrasteFooterDefensoria: var(--colorAzulOscuroDefensoriaDelPuebloSub);
  --coloramarilloHoverFooter: var(--colorAmarilloQuemado);
  --colorAzulReyClaroRedesFooter: var(--colorAzulReyClaro);
  --colorGrisClaroFooterDefensoria: var(--colorGrisClaroMacas);
  --fondoExplicacion: var(--colorAzulOscuroDefensoriaDelPueblo); /* GC */
  --colorBackgroundBarraNavegacionLogo: var(--colorCyan);
  --colorBackgroundBarraNavegacionVisor: var(--colorBlanco); /* Visor */
  --colorBackgroundBotonBuscarTextoVisor: var(--colorAzulOscuroDefensoriaDelPueblo); /* Visor */
  --colorBackgroundBotonBuscarTextoVisorHover: var(--colorGrisOscuro); /* Visor */
  --colorBackgroundBotonMenuUsabilidad: var(--colorAzulClaroDefensoriaDelPueblo);
  --colorBackgroundBotonMenuUsabilidadHover: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorBackgroundBotonNuevaBusquedaTextoVisor: var(--colorAzulBackground); /* Visor */
  --colorBackgroundBotonNuevaBusquedaTextoVisorHover: var(--colorAzulOscuroDefensoriaDelPueblo); /* Visor */
  --colorBackgroundBotonSencilloPanelBotonesVisor: var(--colorAzulCielo); /* Visor */
  --colorBackgroundBotonSencilloPanelBotonesVisorHover: var(--colorNaranja); /* Visor */
  --colorBackgroundContenidoFranjaAyudas: var(--colorAzul);
  --colorBackgroundContenidoFranjaContactos: var(--colorBlanco);
  --colorBackgroundFranjaAlcaldia: var(--colorBlanco);
  --colorBackgroundFranjaAstrea: var(--colorCyan);
  --colorBackgroundFranjaAyudas: var(--colorGrisMuyClaro);
  --colorBackgroundFranjaCiudadano: var(--colorBlanco);
  --colorBackgroundFranjaContactos: var(--colorGrisMuyClaro);
  --colorBackgroundFranjaEnlacesExternos: var(--colorBlanco);
  --colorBackgroundFranjaEstarMasCerca: var(--colorAzul);
  --colorBackgroundFranjaGovCo: var(--colorAzulGovCo);
  --colorBackgroundFranjaLogoMenu: var(--colorAzulClaro);

  --colorBackgroundFranjaRedesSociales: var(--colorBlanco);
  --colorBackgroundImagenMateria: var(--colorBlanco);
  --colorBackgroundImagenMateriaHover: var(--colorBlanco);
  --colorBackgroundInputCasillaBusquedaVisor: var(--colorBlanco);
  --colorBackgroundMenuUsabilidad: var(--colorAzulGovCo);
  --colorBackgroundModulosMenu: var(--colorBackgroundGeneral);
  --colorBackgroundNavegacionNuevasOpciones: var(--colorGrisMuyClaroAlterno);
  --colorBackgroundOpcionMenuContextual: var(--colorAzulCielo);
  --colorBackgroundOpcionMenuContextualHover: var(--colorNaranja);
  --colorBackgroundOpcionMenuHorizontalFranjaMenuInstitucional: var(--colorAzulCielo);
  --colorBackgroundOpcionMenuHorizontalFranjaMenuInstitucionalHover: var(--colorAzulBackground);
  --colorBackgroundPanelLateralMenu: var(--colorBackgroundGeneral);
  --colorBackgroundPanelSelector: var(--colorBackgroundGeneral);
  --colorBackgroundPanelVisor: var(--colorBlanco); /* Visor */
  --colorBackgroundYearListaConcordancias: var(--colorAzulCielo); /* Visor */


  --colorBordeBotonBuscarTextoVisor: var(--colorBackgroundFranjaNavegacionVisor); /* Visor */
  --colorBordeBotonBuscarTextoVisorHover: var(--colorAzulOscuroDefensoriaDelPueblo); /* Visor */
  --colorBordeBotonNuevaBusquedaTextoVisor: var(--colorAzulBackground); /* Visor */
  --colorBordeBotonNuevaBusquedaTextoVisorHover: var(--colorAzulOscuroDefensoriaDelPueblo); /* Visor */
  --colorBordeBotonUsabilidad: var(--colorAzulGovCo);
  --colorBordeBotonUsabilidadHover: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorBordeInputCasillaBusquedaVisor: var(--colorBordePanelesVisor); /* Visor */
  --colorBordeInputCasillaBusquedaVisorOutline: var(--colorGrisBordesEspeciales); /* Visor */
  --colorBordeItemListaPanelVisor: var(--colorBordePanelesVisor); /* Visor */
  --colorBordeNavegacionNuevasOpciones: var(--colorBackgroundGeneral);
  --colorBordeOpcionMenuVertical: var(--colorGrisSeparadorOpciones);
  --colorBordeOpcionSeleccionada: var(--colorBackgroundGeneral);
  --colorBordePanelDocumentosYear: var(--colorGrisSeparadorOpciones);
  --colorBordePanelMateriasLetras: var(--colorBackgroundGeneral);
  --colorBordeSombraFranjaNavegacionVisor: rgba(0, 0, 0, 0.07); /* Visor */
  --colorBordeTituloPanelVisor: var(--colorAzulCielo); /* Visor */
  --colorBordeTituloYear: var(--colorCyan);
  --colorBordeTituloYearHover: var(--colorNaranja);


  --colorTextoBotonMenuUsabilidad: var(--colorBlanco);
  --colorTextoBotonMenuUsabilidadHover: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorTextoBotonPanelBotonesVisor: var(--colorAzulGovCo);
  --colorTextoBotonVerMasSubmenu: var(--colorAzulOscuroDefensoriaDelPueblo);
  --colorTextoCasillaBuscar: var(--colorNegro);
  --colorTextoDescripcionPanel: var(--colorGrisTextos);
  --colorTextoDescripcionVisor: var(--colorGrisTextos); /* Visor */
  --colorTextoDescripcionVisorHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoDestacados: var(--colorGrisTextosAlterno); /* Visor */
  --colorTextoEntidadVisor: var(--colorGrisTextos); /* Visor */
  --colorTextoFranjaCiudadano: var(--colorAzul);
  --colorTextoIdActoTramite: var(--colorGrisTextos); /* Visor */
  --colorTextoIdActoTramiteHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoIdConcordancia: var(--colorGrisTextos); /* Visor */
  --colorTextoIdConcordanciaHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoIdDesarrollo: var(--colorGrisTextos); /* Visor */
  --colorTextoIdDesarrolloHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoIdMemoria: var(--colorGrisTextos); /* Visor */
  --colorTextoIdMemoriaHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoIdModificacion: var(--colorGrisTextos); /* Visor */
  --colorTextoIdModificacionHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoIdNotificacion: var(--colorGrisTextos); /* Visor */
  --colorTextoIdNotificacionHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoItemsListaPanelVisor: var(--colorGrisTextos); /* Visor */
  --colorTextoItemsListaPanelVisorHover: var(--colorAzulGovCo); /* Visor */
  --colorTextoLabelSelectorYear: var(--colorBlanco);
  --colorTextoLetrasAbecedario: var(--colorBlanco);
  --colorTextoLetrasAbecedarioHover: var(--colorBlanco);
  --colorTextoOpcionMenuContextual: var(--colorBlanco);
  --colorTextoOpcionMenuContextualHover: var(--colorBlanco);
  --colorTextoOpcionMenuHorizontalFranjaLogoMenu: var(--colorNegro);
  --colorTextoOpcionMenuHorizontalFranjaLogoMenuHover: var(--colorNaranja);
  --colorTextoTituloAuxiliar: var(--colorNegroTextos);
  --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);
  --colorTextosVisor: var(--colorNegroTextos); /* Visor */
  --colorTextoYearVisor: var(--colorGrisTextos); /* Visor */

  --altoPanelDocumento: 1754px; /* 1754px Tamaño para A4 con 150PPI -https://www.papersizes.org/a-sizes-in-pixels.htm- */
  --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 */
  --margenImagenOpcion: 20px;

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

  --letraDescripcionDocumentoNormal: var(--letra18);
  --letraDescripcionDocumentoSmall: var(--letra16);
  --letraBotonGeneralNormal: var(--letra16);
  --letraBotonGeneralSmall: var(--letra14);
  --letraBotonReferenciaADocumentoNormal: var(--letra18);
  --letraBotonReferenciaADocumentoSmall: var(--letra16);
  --letraDescripcionModuloNormal: var(--letra16);
  --letraDescripcionModuloSmall: var(--letra14);
  --letraLetrasNormal: var(--letra16);
  --letraLetrasSmall: var(--letra14);
  --letraOpcionNuevaNormal: var(--letra20); /* Va acompañado de --letraLineHeightOpcionNuevaNormal */
  --letraOpcionNuevaSmall: var(--letra16); /* Va acompañado de --letraLineHeightOpcionNuevaSmall */
  --letraSelectorNormal: var(--letra14);
  --letraTituloNormogramaH1Normal: var(--letra28);
  --letraTituloNormogramaH1Small: var(--letra20);
  --letraTituloH1Normal: var(--letra28);
  --letraTituloH1Small: var(--letra20);
  --letraTituloH1PrincipalNormal: var(--letra26);
  --letraTituloH1PrincipalSmall: var(--letra24);
  --letraTituloH2Normal: var(--letra16);
  --letraTituloH2Small: var(--letra14);
  --letraTituloH2AuxiliarNormal: var(--letra16);
  --letraTituloH2AuxiliarSmall: var(--letra14);
  --letraTituloH3Normal: var(--letra12);
  --letraTituloH3Small: var(--letra10);
  --letraTituloModuloNormal: var(--letra24);
  --letraTituloModuloSmall: var(--letra20);
  --letraYearsNormal: var(--letra16);
  --letraYearsSmall: var(--letra14);

  --letraLineHeightDescripcionDocumentoNormal: calc(22px * var(--multiplicadorLetra));
  --letraLineHeightDescripcionDocumentoSmall: calc(20px * var(--multiplicadorLetra));
  --letraLineHeightOpcionNuevaNormal: calc(24px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraOpcionNuevaNormal */
  --letraLineHeightOpcionNuevaSmall: calc(20px * var(--multiplicadorLetra)); /* Se agrega 4px a font-size --letraOpcionNuevaSmall */

  --fontSizeMaterialIconAnotaciones: 20px;
  --fontSizeMaterialIconBotonSencillo: 20px;
  --fontSizeMaterialIconBotonVisor: 24px;
  --fontSizeMaterialIconCerrar: 20px;
  --fontSizeMaterialIconIrArriba: 20px;
  --fontSizeMaterialIconNormal: 24px;

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

  --borderRadiusBotones: 10px;
  --borderRadiusModulos: 10px;
  --enfasisDocumentos: 500;
  --enfasisLetras: 600;
  --enfasisModulos: 500;
  --enfasisOpciones: 500;
  --enfasisTituloPrincipal: 700;
  --enfasisYears: 600;
  --margenVerticalImagenOpcionNormal: 20px;
  --margenVerticalImagenOpcionSmall: 18px;

  font-family: 'Roboto', sans-serif;
  font-size: var(--letra18);
  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: 610px;
  /* Set same as footer's height */
  /* 60px + 550px */
}

@media screen and (min-width: 400px) {
  body::after {
    height: 580px;
    /* 60px + 520px */
  }
}

@media screen and (min-width: 992px) {
  body::after {
    height: 350px;
    /* 60px + 290px */
  }
}

@media screen and (min-width: 1250px) {
  body::after {
    height: 330px;
    /* 60px + 270px */
  }
}

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